Web Goes Native: PWAs with Angular Shmuela Jacobs

Shmuela Jacobs Front-end Developer & Consultant ng-girls.org

No content

Progressive

Web Apps • strong computers • fast wifi connection • linkable

Mobile Apps • installable • notifications • device api

Mobile Apps • installable • notifications • device api • search in store • not linkable • permissions • updates

Progressive Web Apps The Best of Both Worlds

Progressive Web Apps • Progressive • Discoverable • Linkable • App-like • Responsive • Connectivity-independent • Re-engageable • Installable • Fresh • Safe Reliable Fast Engaging

whatwebcando.today

Progressive Web Apps https://youtu.be/QOKWDAQSS_w

Lighthouse • Chrome dev tools • Chrome extension • Command line - npm

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

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

Demo App song-book-not-pwa song-book-e2ba5

Demo App

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

Progressive Web Apps • Progressive • Discoverable • Linkable • App-like • Responsive • Connectivity-independent • Re-engageable • Installable • Fresh • Safe

Shmuela Jacobs shmuela@ng-girls.org shmool @ShmuelaJ 6JCPM;QW ng-girls.org angulardevsummit.com www.meetup.com/Angular-Nights