automatic progressive web apps - london, uk · after all, what is pwa? progressive web apps use...
TRANSCRIPT
![Page 1: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/1.jpg)
using Angular Service Workerusing Angular Service Worker
Maxim SalnikovAngular GDE
AutomaticAutomaticProgressive Web Apps Progressive Web Apps
![Page 2: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/2.jpg)
“ How to create an AngularHow to create an Angular
Progressive Web App?Progressive Web App?Natively & naturallyNatively & naturally
![Page 3: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/3.jpg)
Maxim SalnikovMaxim Salnikov
@webmaxru@webmaxru
Full-Stack Engineer at Full-Stack Engineer at ForgeRockForgeRockPWAPWAngelist / tr ainerngelist / tr ainerLondonPWALondonPWA and and OsloPWAOsloPWA meetups meetupsorganizerorganizerngVikings conferencengVikings conference organizer organizer
![Page 4: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/4.jpg)
After all, wha t is PWA?After all, wha t is PWA?
Progressive web apps use modern webAPIs along with traditional progressiveenhancement strategy to create cross-
platform web applications.
https://developer.mozilla.org/en-US/Apps/Progressive
These apps work These apps work everywhereeverywhere and andprovide several features that giveprovide several features that givethem the same them the same user experienceuser experience
advantagesadvantages as native apps. as native apps.
![Page 5: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/5.jpg)
Cross-pla tform?Cross-pla tform?
BrowserBrowser
DesktopDesktop
MobileMobile
App store?App store?
Dev builds
![Page 6: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/6.jpg)
During last two weeksDuring last two weeks
![Page 7: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/7.jpg)
UX advantages?UX advantages?
Working offlineWorking offline
Proper app experienceProper app experience
Smarter networkingSmarter networking
Staying notifiedStaying notified}} Service Worker
API
Web App Manifest
![Page 8: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/8.jpg)
1300+ developers1300+ developersMajor browsers/ frameworks/libs repsMajor browsers/ frameworks/libs reps
bit.ly/go-pw a-slackbit.ly/go-pw a-slack
![Page 9: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/9.jpg)
❤❤
![Page 10: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/10.jpg)
++ ==<script />
![Page 11: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/11.jpg)
++ ==
![Page 12: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/12.jpg)
Angular Service WorkerAngular Service WorkerNGSWNGSW
![Page 13: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/13.jpg)
Generate a new Angular PWAGenerate a new Angular PWA
$ ng new myPWA --mobile
Angular CLI < 1.6Angular CLI < 1.6Angular Service Worker βAngular Service Worker β
YesterdayYesterday
Angular Mobile ToolkitAngular Mobile Toolkit
![Page 14: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/14.jpg)
Generate a new Angular PWAGenerate a new Angular PWA
$ ng new myPWA --service-worker
Angular CLI 1.6-1.7 Angular CLI 1.6-1.7 Angular Service Worker 5Angular Service Worker 5
TodayToday
![Page 15: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/15.jpg)
Generate a new Angular PWAGenerate a new Angular PWA
$ ng new myPWA
Angular CLI 6Angular CLI 6Angular Service Worker 6Angular Service Worker 6Web App ManifestWeb App Manifest@Schematics@Schematics
TomorrowTomorrow
$ ng add @angular/pwa --project=myPWA
![Page 16: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/16.jpg)
Building Angular PWABuilding Angular PWA
$ ng build --prod
ngsw-worker.jsngsw-worker.jsngsw.jsonngsw.json
dist/dist/
![Page 17: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/17.jpg)
![Page 18: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/18.jpg)
Hint #1:Hint #1: Checking the status Checking the status
https://y ourwebsite.c omhttps://y ourwebsite.c om/ ngsw/ state/ ngsw/ stateNGSW Debug Info: Driver state: NORMAL ((nominal)) Latest manifest hash: cd4716ff2d3e24f4292010c929ff429d9eeead73 Last update check: 9s215u === Version 34c3fd2361735b1330a23c32880640febd059305 === Clients: 7eb10c76-d9ed-493a-be12-93f305394a77 === Version cd4716ff2d3e24f4292010c929ff429d9eeead73 === Clients: ee22d69e-37f1-439d-acd3-4f1f366ec8e1 === Idle Task Queue === Last update tick: 4s602u Last update run: 9s222u Task queue:
![Page 19: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/19.jpg)
Adding NGSW to the existing appAdding NGSW to the existing app
$ ng set apps.0.serviceWorker=true
$ npm install @angular/service-worker --save
1. 1. Install the packageInstall the package
2. 2. Enable build supportEnable build support
3. 3. Register NGSW for your appRegister NGSW for your app
4. 4. Create configuration fileCreate configuration file
![Page 20: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/20.jpg)
Service worker build support in the CLIService worker build support in the CLI
BuildBuild
CopyCopy
src/ ngsw-config.jsonsrc/ ngsw-config.json
dist/dist/
dist/ ngsw.jsondist/ ngsw.json
ngsw-worker.jsngsw-worker.jsnode_modules/@angular...
Can be npm-scripted for legacy Angular CLIs!Can be npm-scripted for legacy Angular CLIs!
![Page 21: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/21.jpg)
Registering NGSWRegistering NGSW
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
... @NgModule({ ... imports: [ ... ] }) export class AppModule { }
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
app.module.tsapp.module.ts
![Page 22: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/22.jpg)
NGSW configuration fileNGSW configuration filesrc/ ngsw-config.jsonsrc/ ngsw-config.json
{ "index": "/index.html", "assetGroups": [...], "dataGroups": [...] }
![Page 23: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/23.jpg)
Working offlineWorking offline
Proper app experienceProper app experience
Smarter networkingSmarter networking
Staying notifiedStaying notified
![Page 24: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/24.jpg)
App shellApp shellassetGroupsassetGroups
{ "name": "app", "installMode": "prefetch", "resources": {...} }
![Page 25: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/25.jpg)
App shell resourcesApp shell resourcesassetGroups / "app" / resourcesassetGroups / "app" / resources"resources": { }
"versionedFiles": [ "/*.bundle.css", "/*.bundle.js", "/*.chunk.js"
"files": [ "/favicon.ico", "/index.html" ],
![Page 26: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/26.jpg)
App shell / on-demandApp shell / on-demandassetGroupsassetGroups
{ "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": {...} }
![Page 27: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/27.jpg)
App shell / on-demandApp shell / on-demandassetGroups / "asse ts" / resourcesassetGroups / "asse ts" / resources"resources": { }
"files": [ "/assets/**" ],
"urls": [ "https://fonts.googleapis.com/**", "https://fonts.gstatic.com/**" ]
![Page 28: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/28.jpg)
Runtime cachingRuntime cachingdataGroupsdataGroups
{ "name": "api-freshness", "urls": [ "/api/breakingnews/**" ], }
"cacheConfig": { "strategy": "freshness", "maxSize": 10, "maxAge": "12h", "timeout": "10s" }
![Page 29: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/29.jpg)
Runtime cachingRuntime cachingdataGroupsdataGroups
{ "name": "api-performance", "urls": [ "/api/archive/**" ], }
"cacheConfig": { "strategy": "performance", "maxSize": 100, "maxAge": "365d" }
![Page 30: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/30.jpg)
Hint #2:Hint #2: Support API versioning Support API versioningdataGroupsdataGroups
{ "version": 1, "name": "api-performance", "urls": [ "/api/**" ], ... }
{ "version": 2, "name": "api-performance", "urls": [ "/api/**" ], ... }
![Page 31: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/31.jpg)
App version updatesApp version updates
v1v1 v2v2
v1v1v1v1 v2v2
ServerServer
BrowserBrowser
v2v2
![Page 32: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/32.jpg)
Hint #3: Hint #3: Notify about updatesNotify about updates
import { SwUpdate } from '@angular/service-worker';
constructor(private swUpdate: SwUpdate) {}
this.swUpdate.available.subscribe(event => { let snackBarRef = this.snackBar .open('Newer version of the app is available', 'Refresh'); snackBarRef.onAction().subscribe(() => { window.location.reload() }) })
updates.component.tsupdates.component.ts
![Page 33: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/33.jpg)
![Page 34: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/34.jpg)
Working offlineWorking offline
Proper app experienceProper app experience
Smarter networkingSmarter networking
Staying notifiedStaying notified
![Page 35: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/35.jpg)
Push notificationsPush notifications
import { SwPush } from '@angular/service-worker';
constructor(private swPush: SwPush) {}
subscribeToPush() { this.swPush.requestSubscription({ serverPublicKey: this.VAPID_PUBLIC_KEY }) .then(pushSubscription => { // Pass subscription object to backend }) }
push.component.tspush.component.ts
![Page 36: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/36.jpg)
Push notifications / sendPush notifications / send
{ "notification": { } }
server-side.js / sendNo tification payloadserver-side.js / sendNo tification payload
"title": "Very important notification", "body": "Angular Service Worker is cool!", "icon": "https://angular.io/assets/logo.png", "actions": [ { "action": "gocheck", "title": "Go and check" } ], ...
![Page 37: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/37.jpg)
![Page 38: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/38.jpg)
Hint #4:Hint #4: Kill switch Kill switch
1.1. Long way Long way
2.2. Short way Short way
ng set apps.0.serviceWorker=false ng build --prod ...deploy
rm dist/ngsw.json ...deploy
![Page 39: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/39.jpg)
Hint #4:Hint #4: Kill switch Kill switch
3.3. Proper way Proper waycp dist/safety-worker.js dist/ngsw-worker.js ...deploy
self.addEventListener('install', e => { self.skipWaiting(); }) self.addEventListener('activate', e => { e.waitUntil(self.clients.claim()); self.registration.unregister().then( () => { console.log('Unregistered old service worker'); });
safety-w orker.jssafety-w orker.js
![Page 40: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/40.jpg)
Main available featuresMain available features
App ShellApp Shell Runtime CachingRuntime Caching
Push NotificationsPush Notifications Smart UpdatesSmart Updates
![Page 41: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/41.jpg)
Angular Service Worker advantagesAngular Service Worker advantages
Essential features are config-drivenEssential features are config-drivenDecoupled updates modelDecoupled updates modelIntegrity checksIntegrity checksDoing things in Angular wayDoing things in Angular way
![Page 42: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/42.jpg)
Thank you!Thank you!
@webmaxru@webmaxruMaxim SalnikovMaxim Salnikov
![Page 43: Automatic Progressive Web Apps - London, UK · After all, what is PWA? Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec564d8040010522219d25f/html5/thumbnails/43.jpg)
Questions?Questions?