angular pwa ngtw

angular pwa ng-tawian 2018

Transcript

1. 以 實現 網站開發: 離線、推播、Service Worker Jecelyn Yeen
2. @JecelynYeen ⼟土⽣生⼟土⻑⾧長的吉隆隆坡，⾺馬來來⻄西亞⼈人 • ⾕谷歌開發技術專家 • Web technologies • Angular • 部落客 @ scotch.io, medium.com • 軟件架構師 @ Randstad • 社群發起⼈人 • Women Who Code KL • The Frontend Malaysia
3. 概覽 何謂 ？ 以 實現 開發 設定 Service Worker + 離線 實現網絡推播 Web Push Notification 剖解 PWA 的 P (progressive) ⼯工具箱 和 資源
4. Quiz
5. 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
6. 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…
7. Biggest myth about PWA It is all about adding to home screen
8. It is about Bringing better web experience to the users
9. +
10. How to Start ? • npm install @angular/cli • ng new my-app-name Run in command line / terminal:
11. 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
12. Mobile View test pwa
13. test pwa test-pwa test pwa
14. test pwa test-pwa test pwa It’s work!
15. How does it works? Magic?
16. Minimum PWA • Have manifest.json • Register service worker
17. Behind the scene, … • Creating manifest.json • Creating set of icons • Register service worker • Creating ngsw-config.json
18. 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" }, … ] }
19. Service Worker The Middle Man
20. How Service Worker works? Browser App Service Worker Cache
21. Service Worker & Cache APIs support Browsers Mobile Desktop
22. NGSW configuration file { "assetGroups": [ Smart defaults for the app shell ], "dataGroups": [ Settings for your API, etc ], ... } ngsw-config.json
23. 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
24. 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
25. 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
26. Web Push Notification
27. Why push notifications? • Allow users to opt-in for timely updates • Re-engage users with customised content
28. 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.
29. Not all browsers support web push notification yet OS Browsers Android iOS Mac Windows
30. Push Notification Banner Fields https://webengage.com/blog/web-push-notification-guide/
31. 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()); }); }
32. Push Subscription - should be stored in database { endpoint: "https://fcm.googleapis.com/fcm/send/f2WhAQ..", expirationTime: null, keys: { auth: "t1kTHJn_wemTVrA7hq2...", p256dh: "BNeD7NIDj29w9P0q1..." } }
33. Generate VAPID key • Easiest way https://github.com/web-push-libs/web-push • npm install web-push -g • web-push generate-vapid-keys
34. 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()); }); }
35. Example Push Notification object { "notification": { "title": "hello", "body": "blah blah blah" } } • banner info must put under notification property
36. Let’s talk about Progressive? What does it mean?
37. http://www.dictionary.com/browse/progressive
38. + progressive performance
39. Build the app using prod • Run ng build --prod • Using Ahead of Time compilation • Using Build Optimizer
40. 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
41. Preloading Strategy @NgModule({ imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) app-routing.module.ts
42. Consider Server Side Rendering (SSR) No SSR Load HTML SSR Load HTML Boostrap Boostrap First meaningful Paint <app-root> Loading</app-root> First meaningful Paint Loading • Better first load experience
43. 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
44. 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/
47. 謝謝 https://speakerdeck.com/chybie/angular-pwa-ngtw