以 實現 網站開發: 離線、推播、Service Worker Jecelyn Yeen 

@JecelynYeen ⼟土⽣生⼟土⻑⾧長的吉隆隆坡，⾺馬來來⻄西亞⼈人 • ⾕谷歌開發技術專家 • Web technologies • Angular • 部落客 @ scotch.io, medium.com • 軟件架構師 @ Randstad • 社群發起⼈人 • Women Who Code KL • The Frontend Malaysia 

概覽 何謂 ？ 以 實現 開發 設定 Service Worker + 離線 實現網絡推播 Web Push Notification 剖解 PWA 的 P (progressive) ⼯工具箱 和 資源 

Quiz 

PWA Quiz It is just a normal website It can be talk to your phone’s native api - e.g. camera, sensor, spawn notification It can work offline / semi offline It is installable / can be add to home screen (icon) It is fast / performant It can work cross platform + cross browsers Install update on the fly / refresh It is safe 

What is Progressive Web App? It is just a normal website It can be talk to your phone’s native api - e.g. camera, sensor, spawn notification It can work offline / semi offline It is installable / can be add to home screen (icon) It is fast / performant It can work cross platforms + cross browsers Cross platform yes - as long as it’s browser, Cross browser… no, most modern browsers support* Yes, it should, but… you know Install update on the fly / refresh It is safe Definitely safer than https, but… 

Biggest myth about PWA It is all about adding to home screen 

It is about Bringing better web experience to the users 

+ 

How to Start ? • npm install @angular/cli • ng new my-app-name Run in command line / terminal: 

How to Start + • ng add @angular/pwa Run in command line / terminal: Build & Deploy it: • ng build --prod • deploy /dist/[project] folder to hosting • ng serve do not support service worker 

Mobile View test pwa 

test pwa test-pwa test pwa 

test pwa test-pwa test pwa It’s work! 

How does it works? Magic? 

Minimum PWA • Have manifest.json • Register service worker 

Behind the scene, … • Creating manifest.json • Creating set of icons • Register service worker • Creating ngsw-config.json 

manifest.json { "name": "test-pwa", "short_name": "test-pwa", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, … ] } 

Service Worker The Middle Man 

How Service Worker works? Browser App Service Worker Cache 

Service Worker & Cache APIs support Browsers Mobile Desktop 

NGSW configuration file { "assetGroups": [ Smart defaults for the app shell ], "dataGroups": [ Settings for your API, etc ], ... } ngsw-config.json 

NGSW configuration file { "index": "/index.html", "assetGroups": [{ "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ] } }] } ngsw-config.json / assetGroups • prefetch: fetch eagerly • lazy: fetch when we need 

NGSW configuration file { "name": "myApi", "urls": [ "/api/archive/**" ], "cacheConfig": { "strategy": "performance", "maxSize": 100, "maxAge": "365d" } } ngsw-config.json / dataGroups • performance: cache first • freshness: network-first 

SwUpdate Service constructor(updates: SwUpdate) { // force check for sw update updates.checkForUpdate(); // when sw update available updates.available.subscribe(event => { console.log('current version is', event.current); console.log('available version is', event.available); }); } https://angular.io/guide/service-worker-communications 

Web Push Notification 

Why push notifications? • Allow users to opt-in for timely updates • Re-engage users with customised content 

Push Notifications is… • Notification API - allow pwa display system notification to user • Push API - allow service worker to handle Push Messages from a server, even while the pwa is not active • Both APIs are built on top of Service Worker API. 

Not all browsers support web push notification yet OS Browsers Android iOS Mac Windows 

Push Notification Banner Fields https://webengage.com/blog/web-push-notification-guide/ 

SwPush Service constructor(push: SwPush) { push.messages.subscribe(x => { // subscribe & display messages to user console.log('push', x); }); const key = 'VAPID server public key'; // ask for permission push.requestSubscription({ serverPublicKey: key }).then(ps => { // normally these info are save in database console.log(ps.toJSON()); }); } 

Push Subscription - should be stored in database { endpoint: "https://fcm.googleapis.com/fcm/send/f2WhAQ..", expirationTime: null, keys: { auth: "t1kTHJn_wemTVrA7hq2...", p256dh: "BNeD7NIDj29w9P0q1..." } } 

Generate VAPID key • Easiest way https://github.com/web-push-libs/web-push • npm install web-push -g • web-push generate-vapid-keys 

SwPush Service constructor(push: SwPush) { push.messages.subscribe(x => { // subscribe & display messages to user console.log('push', x); }); const key = 'VAPID server public key'; // ask for permission push.requestSubscription({ serverPublicKey: key }).then(ps => { // normally these info are save in database console.log(ps.toJSON()); }); } 

Example Push Notification object { "notification": { "title": "hello", "body": "blah blah blah" } } • banner info must put under notification property 

Let’s talk about Progressive? What does it mean? 

http://www.dictionary.com/browse/progressive 

+ progressive performance 

Build the app using prod • Run ng build --prod • Using Ahead of Time compilation • Using Build Optimizer 

Use Lazy Loading / Preloading • Download the only the code needed to start the app • Preload all the modules by using PreloadAllModules strategy • 100% flexibility with your custom PreloadingStrategy 

Preloading Strategy @NgModule({ imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) app-routing.module.ts 

Consider Server Side Rendering (SSR) No SSR Load HTML SSR Load HTML Boostrap Boostrap First meaningful Paint Loading First meaningful Paint Loading • Better first load experience 

How to • ng generate universal --client-project=ssr Long way • ng add @ng-toolkit/universal • npm run build:prod • npm run server Short way Follow the guide here: https://angular.io/guide/universal https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688 

Tooling & Resources • /ngsw/state - current state of the service worker & log • Workbox - Need more control & flexibility on service worker configuration https://developers.google.com/web/tools/workbox/ • PWA audit tools - lighthouse or page speed insight • Learn service worker by playing games https://serviceworkies.com/ 

No content

No content

謝謝 https://speakerdeck.com/chybie/angular-pwa-ngtw