Progressive Web Apps with Angular

Web goes Native: PWAs with Angular

With Progressive Web Applications we can enjoy both web and mobile-originated features for increasing user experience and engagement.

Let's explore several PWA features and see how Angular and its ecosystem recognizes these needs and helps us "progressify" our apps!

Presented at JavaScript-Israel meetup:
https://www.meetup.com/JavaScript-Israel/events/242030049/

Transcript

1. Web Goes Native: PWAs with Angular Shmuela Jacobs
2. Shmuela Jacobs Front-end Developer & Consultant ng-girls.org
4. Progressive
5. Web Apps • strong computers • fast wifi connection • linkable
6. Mobile Apps • installable • notifications • device api
7. Mobile Apps • installable • notifications • device api • search in store • not linkable • permissions • updates
8. Progressive Web Apps The Best of Both Worlds
9. Progressive Web Apps • Progressive • Discoverable • Linkable • App-like • Responsive • Connectivity-independent • Re-engageable • Installable • Fresh • Safe Reliable Fast Engaging
10. whatwebcando.today
11. Progressive Web Apps https://youtu.be/QOKWDAQSS_w
12. Lighthouse • Chrome dev tools • Chrome extension • Command line - npm
13. Demo App song-book-e2ba5.firebaseapp.com song-book-not-pwa.firebaseapp.com Angular Angular-CLI Angular Material (2) Flex Layout @angular/service-worker Firebase: hosting auth DB storage cloud-functions
14. Demo App npm install -S @angular/service-worker ng set apps.0.serviceWorker=true ng build --prod create & configure ngsw-manifest.json - service worker https://fluin.io/blog/angular-service-worker create & configure src/manifest.json - app manifest Great Progressive Web App Experiences with Angular Stephen Fluin & Alex Rickabaugh (Google I/O '17): 
 https://youtu.be/C8KcW1Nj3Mw
15. Demo App song-book-not-pwa song-book-e2ba5
16. Demo App
17. Recommended Resource Maxim Salnikov @webmaxru bit.ly/join-pwa-slack https://docs.google.com/document/d/ 1F0e0ROaZUnTFftmC0XovpREHWHjcXa4CggiFlmifjhw/edit?usp=sharing Progressive Web Apps using the Angular Service Worker
18. Progressive Web Apps • Progressive • Discoverable • Linkable • App-like • Responsive • Connectivity-independent • Re-engageable • Installable • Fresh • Safe
19. Shmuela Jacobs shmuela@ng-girls.org shmool @ShmuelaJ 6JCPM;QW ng-girls.org angulardevsummit.com www.meetup.com/Angular-Nights