angular pwa ngtw

1a73ecdb082f212bf8d81eb9a3a53e29?s=47 Jecelyn Yeen
November 16, 2018

angular pwa ngtw

angular pwa ng-tawian 2018

1a73ecdb082f212bf8d81eb9a3a53e29?s=128

Jecelyn Yeen

November 16, 2018
Tweet

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/
  45. None
  46. None
  47. 謝謝 https://speakerdeck.com/chybie/angular-pwa-ngtw