[Shmuela Jacobs] Web goes Native: Progressive Web Apps with Angular

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. Web Goes Native: PWAs with Angular Shmuela Jacobs
2. Shmuela Jacobs Front-end Consultant & Trainer
3. Shmuela Jacobs Front-end Consultant & Trainer ng-girls.org
4. Shmuela Jacobs ng-girls.org Front-end Consultant & Trainer
6. Shmuela Jacobs ng-girls.org Front-end Consultant & Trainer
7. Progressive
8. Web Apps • strong computers • fast wifi connection • linkable
9. Mobile Apps • installable • notifications • device api
10. Mobile Apps • installable • notifications • device api • search in store • not linkable • permissions • updates
11. Progressive Web Apps The Best of Both Worlds
12. Progressive Web Apps • Progressive • Discoverable • Linkable • App-like • Responsive • Connectivity-independent • Re-engageable • Installable • Fresh • Safe Reliable Fast Engaging
13. whatwebcando.today
14. Progressive Web Apps https://youtu.be/QOKWDAQSS_w
15. Lighthouse • Chrome dev tools • Chrome extension • Command line - npm
16. Demo App song-book-pwa.firebaseapp.com Angular Angular-CLI Angular Material (2) Flex Layout @angular/service-worker Firebase: hosting auth DB storage cloud-functions
17. Initial state... https://song-book-pwa.firebaseapp.com Demo App
18. Build Optimizer use @angular-devkit/build-optimizer npm install -S @angular/service-worker ng build --prod --build-optimizer
19. App-Shell Add app-shell - to be loaded until JS initializes
20. App-Shell Add app-shell - to be loaded until JS initializes
21. App Manifest create & configure src/manifest.json add app icons // .angular-cli.json "apps": [ { "assets": [ "manifest.json" ], // index.html <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#8a2be2">
22. App Manifest
23. App Manifest
24. Service Worker add service worker create & configure ngsw-manifest.json https://fluin.io/blog/angular-service-worker // .angular-cli.json "apps": [ { "serviceWorker": true OR ng set apps.0.serviceWorker=true npm install -S @angular/service-worker
25. Demo App Progressified! Initial state...
26. Progressive Web Apps ✓ Progressive ✓ Discoverable ✓ Linkable ✓ App-like ✓ Responsive ✓ Connectivity-independent ✓ Re-engageable ✓ Installable ✓ Fresh ✓ Safe
27. More in PWA & Angular • Angular v5 • Workbox 2 • Google Cloud Firestore • indexedDB
28. Recommended Resource Maxim Salnikov @webmaxru bit.ly/join-pwa-slack More in PWA & Angular • Angular v5 • Workbox 2 • Google Cloud Firestore • indexedDB
29. Shmuela Jacobs shmuela@ng-girls.org shmool @ShmuelaJ 6JCPM;QW ng-girls.org www.meetup.com/Angular-Nights