Maxim Salnikov
@webmaxru
How to create Angular Progressive Web App?
Products from the future
UI Engineer at ForgeRock
Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications.
Flagged
OS
Service Worker API
Web App Manifest
$ ng add @angular/pwa
$ ng build --prod
$ ng serve
$ ng serve --prod
{
"index": "/index.html",
"assetGroups": [...],
"dataGroups": [...]
}
{
"name": "app",
"installMode": "prefetch",
"resources": {...}
}
"resources": {
}
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
$ ng add @ng-toolkit/universal
import { SwUpdate } from '@angular/service-worker';
constructor(updates: SwUpdate) {}
this.updates.available.subscribe(event => {
})
if (confirm(`New Version is available! OK to refresh`)) {
window.location.reload();
}
{
"appData": {
"versionMessage": "New version: Push notifications added!"
},
...
}
let appData = event.available.appData
let versionMessage = appData ? appData['versionMessage']
: 'New version is available!'
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {...}
}
"resources": {
}
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**",
"https://fonts.gstatic.com/**"
]
"navigationUrls": [
'/**',
'!/**/*.*',
'!/**/*__*',
'!/**/*__*/**',
]
'!/**/login*',
'!/**/account*'
{
"name": "api-freshness",
"urls": [
"/api/breakingnews/**"
],
}
"cacheConfig": {
"strategy": "freshness",
"maxSize": 10,
"maxAge": "12h",
"timeout": "10s"
}
{
"name": "api-performance",
"urls": [
"/api/archive/**"
],
}
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "365d"
}
{
"version": 1,
"name": "api-performance",
"urls": [
"/api/**"
],
...
}
{
"version": 2,
"name": "api-performance",
"urls": [
"/api/**"
],
...
}
import { SwPush } from '@angular/service-worker';
constructor(push: SwPush) {}
subscribeToPush() {
this.push.requestSubscription({
serverPublicKey: this.VAPID_PUBLIC_KEY
})
.then(pushSubscription => {
// Pass subscription object to the backend
})
}
{
"notification": {
}
}
"title": "Very important notification",
"body": "Angular Service Worker is cool!",
"icon": "https://angular.io/assets/logo.png",
"actions": [
{
"action": "gocheck",
"title": "Go and check"
}
],
...
cp safety-worker.js ngsw-worker.js
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'); });
});
rm ngsw.json
Maxim Salnikov
@webmaxru