Angular Progressive Web App: NGSW vs Workbox

NGSW or Workbox?NGSW or Workbox?
Maxim Salnikov
Angular GDE
CreatingCreating
Angular PWAAngular PWA

“ How to create AngularHow to create Angular
Progressive Web App?Progressive Web App?

“ How to create AngularHow to create Angular
Progressive Web App?Progressive Web App?
Using the proper toolsUsing the proper tools

Maxim SalnikovMaxim Salnikov
@webmaxru@webmaxru
Google Developer Expert inGoogle Developer Expert in AngularAngular
AngularAngular OsloOslo // PWA OsloPWA Oslo meetupsmeetups
organizerorganizer
ngVikingsngVikings conference organizerconference organizer
“ Products from the future
UI Engineer at ForgeRock

After all, what is PWA?After all, what is PWA?

Progressive web apps use modern web APIs along
with traditional progressive enhancement strategy
to create cross-platform web applications.
https://developer.mozilla.org/en-US/Apps/Progressive

Progressive web apps use modern web APIs along
with traditional progressive enhancement strategy
to create cross-platform web applications.
https://developer.mozilla.org/en-US/Apps/Progressive
These apps workThese apps work everywhereeverywhere and provideand provide
several features that give them the sameseveral features that give them the same
user experience advantagesuser experience advantages as native apps.as native apps.

#YearOfPWA#YearOfPWA
Latest updatesLatest updates

Cross-platform?Cross-platform?

BrowserBrowser

BrowserBrowser
MobileMobile

BrowserBrowser
DesktopDesktop
MobileMobile

BrowserBrowser
DesktopDesktop
MobileMobile
Flagged

UX advantages?UX advantages?
Smart networking + OfflineSmart networking + Offline

Staying notifiedStaying notified

Other cool thingsOther cool things

}}Service Worker
API

Proper app experienceProper app experience
}}Service Worker
API
Web App Manifest

Create Angular PWACreate Angular PWA

Code service workerCode service worker manuallymanually

Use Angular Service Worker (Use Angular Service Worker (NGSWNGSW))

Go for someGo for some PWA librariesPWA libraries

Go for someGo for some PWA librariesPWA libraries
sw-precachesw-precache

Service Worker 101Service Worker 101

Service Worker 101Service Worker 101
Wait a sec!Wait a sec!

bit.ly/go-pwa-slackbit.ly/go-pwa-slack

1500+ developers1500+ developers

1500+ developers1500+ developers
Major browsers/frameworks/libs repsMajor browsers/frameworks/libs reps

Managing cacheManaging cache
self.addEventListener('install', (event) => {
// Put app's html/js/css to cache
})

Managing cacheManaging cache
self.addEventListener('install', (event) => {
// Put app's html/js/css to cache
})
self.addEventListener('activate', (event) => {
// Wipe previous version of app files from cache
})

In the real worldIn the real world

Can't addCan't add opaque responsesopaque responses directlydirectly

Redirected requestsRedirected requests should be managedshould be managed

Always creating a new version of cache and deletingAlways creating a new version of cache and deleting
the old one isthe old one is not optimalnot optimal

Control overControl over cache sizecache size is requiredis required

Cache invalidationCache invalidation for runtime caching is complexfor runtime caching is complex

Cache invalidationCache invalidation for runtime caching is complexfor runtime caching is complex
......

Intercepting requestsIntercepting requests

Intercepting requestsIntercepting requests
self.addEventListener('fetch', (event) => {
if (event.request.url.indexOf('/api') != -1) {
event.respondWith(
// Network-First Strategy
)
} else {
event.respondWith(
// Cache-First Strategy
)
}
})

All kinds ofAll kinds of fallbacksfallbacks needed for the strategiesneeded for the strategies

There are more complex strategies likeThere are more complex strategies like Stale-While-Stale-While-
RevalidateRevalidate

Good to haveGood to have routingrouting

Good to have the possibility to provide someGood to have the possibility to provide some extraextra
settingssettings for different resource groupsfor different resource groups

Good to have the possibility to provide someGood to have the possibility to provide some extraextra
settingssettings for different resource groupsfor different resource groups
......

ProsPros
Great flexibility!Great flexibility!

ConsCons

ProsPros
Great flexibility!Great flexibility!

ConsCons
Great responsibility!Great responsibility!

Tools help withTools help with

ImplementingImplementing complexcomplex algorithms algorithms

AdoptingAdopting best practicesbest practices

Focusing onFocusing on YOURYOUR task task

Following specificationsFollowing specifications updatesupdates

Following specificationsFollowing specifications updatesupdates
HandlingHandling edge casesedge cases

Angular Service WorkerAngular Service Worker

Angular Service WorkerAngular Service Worker
NGSWNGSW

Generate a new Angular PWAGenerate a new Angular PWA
"Yesterday""Yesterday"

$ ng new myPWA --service-worker

$ 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

$ ng new myPWA
TodayToday

$ ng new myPWA
TodayToday
$ ng add @angular/pwa

$ ng new myPWA
Angular CLI 6Angular CLI 6
TodayToday

$ ng new myPWA
TodayToday

$ ng new myPWA
Web App ManifestWeb App Manifest
TodayToday

$ ng new myPWA
Web App ManifestWeb App Manifest
@Schematics@Schematics
TodayToday

Building Angular PWABuilding Angular PWA

$ ng build --prod

$ ng build --prod
ngsw-worker.jsngsw-worker.js
dist/dist/

$ ng build --prod
ngsw-worker.jsngsw-worker.js
ngsw.jsonngsw.json
dist/dist/
safety-worker.jssafety-worker.js
assets/manifest.jsonassets/manifest.json

Checking the statusChecking the status

https://yourwebsite.comhttps://yourwebsite.com/ngsw/state/ngsw/state

https://yourwebsite.comhttps://yourwebsite.com/ngsw/state/ngsw/state
NGSW 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:

Registering NGSWRegistering NGSW

import { ServiceWorkerModule } from '@angular/service-worker';
app.module.tsapp.module.ts

import { environment } from '../environments/environment';

...
@NgModule({
...
imports: [
...
]
})
export class AppModule { }

...
@NgModule({
...
imports: [
...
]
})
export class AppModule { }
ServiceWorkerModule.register('/ngsw-worker.js',
{ enabled: environment.production }),

NGSW configuration fileNGSW configuration file

NGSW configuration fileNGSW configuration file
src/ngsw-config.jsonsrc/ngsw-config.json
{
"index": "/index.html",
"assetGroups": [...],
"dataGroups": [...]
}

App shellApp shell
assetGroupsassetGroups
{
"name": "app",
"installMode": "prefetch",
"resources": {...}
}

App shell resourcesApp shell resources
assetGroups / "app" / resourcesassetGroups / "app" / resources
"resources": {
}

"resources": {
}
"files": [
"/favicon.ico",
"/index.html"
],

"resources": {
}
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
"files": [
"/favicon.ico",
"/index.html"
],

App shell / on-demandApp shell / on-demand

assetGroupsassetGroups
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {...}
}

assetGroups / "assets" / resourcesassetGroups / "assets" / resources
"resources": {
}

"resources": {
}
"files": [
"/assets/**"
],

"resources": {
}
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**",
"https://fonts.gstatic.com/**"
]

Runtime cachingRuntime caching

dataGroupsdataGroups
{
"name": "api-freshness",
"urls": [
"/api/breakingnews/**"
],
}

{
"name": "api-freshness",
"urls": [
"/api/breakingnews/**"
],
}
"cacheConfig": {
"strategy": "freshness",
"maxSize": 10,
"maxAge": "12h",
"timeout": "10s"
}

{
"name": "api-performance",
"urls": [
"/api/archive/**"
],
}

{
"urls": [
"/api/archive/**"
],
}
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "365d"
}

Support API versioningSupport API versioning
{
"version": 1,
"urls": [
"/api/**"
],
...
}

Support API versioningSupport API versioning
{
"version": 1,
"urls": [
"/api/**"
],
...
}
{
"version": 2,
"urls": [
"/api/**"
],
...
}

App version updatesApp version updates
v1v1
v1v1
ServerServer
BrowserBrowser

v1v1 v2v2
v1v1
ServerServer
BrowserBrowser

v1v1 v2v2
v1v1v1v1
ServerServer
BrowserBrowser

v1v1 v2v2
v1v1v1v1 v2v2
ServerServer
BrowserBrowser
v2v2

Notify about updatesNotify about updates

import { SwUpdate } from '@angular/service-worker';
updates.component.tsupdates.component.ts

constructor(private swUpdate: SwUpdate) {}

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()
})
})

Push notificationsPush notifications

import { SwPush } from '@angular/service-worker';
push.component.tspush.component.ts

constructor(private swPush: SwPush) {}

constructor(private swPush: SwPush) {}
subscribeToPush() {
this.swPush.requestSubscription({
serverPublicKey: this.VAPID_PUBLIC_KEY
})
.then(pushSubscription => {
// Pass subscription object to backend
})
}

Push notifications / sendPush notifications / send

{
"notification": {
}
}
server-side.js / sendNotification payloadserver-side.js / sendNotification payload

{
"notification": {
}
}
server-side.js / sendNotification payloadserver-side.js / sendNotification 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"
}
],
...

Kill switchKill switch
1.1. Long wayLong way
ng set apps.0.serviceWorker=false
ng build --prod
...deploy

1.1. Long wayLong way
2.2. Short wayShort way
ng set apps.0.serviceWorker=false
ng build --prod
...deploy
rm dist/ngsw.json
...deploy

3.3. Proper wayProper way
cp dist/safety-worker.js dist/ngsw-worker.js
...deploy

3.3. Proper wayProper way
cp 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-worker.jssafety-worker.js

Main available featuresMain available features

App ShellApp Shell

App ShellApp Shell Runtime CachingRuntime Caching

Push NotificationsPush Notifications

Push NotificationsPush Notifications Smart UpdatesSmart Updates

ProsPros
Smart defaults go outSmart defaults go out
of the boxof the box
ConsCons

ProsPros
Essential features areEssential features are
codelesscodeless
ConsCons

ProsPros
codelesscodeless
Doing things inDoing things in
Angular wayAngular way
ConsCons

ProsPros
codelesscodeless
ConsCons
Intended to play aIntended to play a
main service worker'smain service worker's
role in your PWArole in your PWA

ProsPros
codelesscodeless
ConsCons
Intended to play aIntended to play a
main service worker'smain service worker's
role in your PWArole in your PWA
There is no good wayThere is no good way
to extend theto extend the
functionalityfunctionality

App shellApp shell
Offline GAOffline GA
Replay failed requestsReplay failed requests
Broadcast updatesBroadcast updates
Build integrationsBuild integrations

# Install the Workbox CLI
$ npm install workbox-cli --global
App shellApp shell

# Install the Workbox CLI
$ npm install workbox-cli --global
# Run the wizard to generate a service worker
$ workbox wizard
App shellApp shell

module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{txt,png,ico,html,js,json,css}"
],
"swDest": "dist/sw.js"
};
workbox-config.jsworkbox-config.js
App shellApp shell

module.exports = {
"globDirectory": "dist/ngPwa",
"globPatterns": [
"favicon.ico",
"index.html",
"*.css",
"*.js",
"assets/**/*"
],
"swDest": "dist/ngPwa/sw.js"
};
workbox-config.jsworkbox-config.js
App shellApp shell

Generated service workerGenerated service worker

importScripts("https://storage.googleapis.com/.../workbox-sw.js");
self.__precacheManifest = [
{
"url": "index.html",
"revision": "b3429974cda6f87f84df90b35fc6faa4"
}, ...
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
sw.jssw.js
Generated service workerGenerated service worker

platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw-default.js')
}
});
main.tsmain.ts
RegistrationRegistration

Caching and servingCaching and serving

Our own service workerOur own service worker

$ npm install --save-dev workbox-build
$ workbox copyLibraries libraries/

"assets": [
{
"glob": "**",
"input": "../libraries/",
"output": "./"
}
...
]
.angular-cli.json.angular-cli.json
$ npm install --save-dev workbox-build
$ workbox copyLibraries libraries/

const {injectManifest} = require('workbox-build')
const swSrc = 'src/service-worker.js';
const swDest = 'dist/sw-default.js'
injectManifest({
swSrc, swDest, ...
})
.then(({count, size}) => {
console.log(`Generated SW which will
precache ${count} files,
totaling ${size} bytes.`)
})
workbox-build.jsworkbox-build.js

importScripts("workbox-v3.2.0/workbox-sw.js");
workbox.precaching.precacheAndRoute([])
my-serviceworker.jsmy-serviceworker.js

importScripts("workbox-v3.2.0/workbox-sw.js");
workbox.precaching.precacheAndRoute([])
my-serviceworker.jsmy-serviceworker.js
// Features code
workbox.routing.registerRoute(
/(http[s]?://)?([^/s]+/)timeline/,
workbox.strategies.networkFirst()
)
...

ProsPros
Can extend existingCan extend existing
service workerservice worker

ConsCons

ProsPros
Feature-richFeature-rich

ConsCons

ProsPros
Feature-richFeature-rich

ConsCons
Extra build stepExtra build step
neededneeded

Angular Progressive Web App: NGSW vs Workbox

Recommandé

Recommandé

Contenu connexe

Plus de Maxim Salnikov

Plus de Maxim Salnikov (9)

Dernier

Dernier (20)

Angular Progressive Web App: NGSW vs Workbox