Save 37% off PRO during our Black Friday Sale! »

Service Workers - Beyond The Cache (Angular Conf Australia)

Service Workers - Beyond The Cache (Angular Conf Australia)

Angular 6 comes with a service worker cache implementation out of the box, which is a great start for building modern, resilient, progressive web applications. But only using the service worker's cache is like driving a sports car in 3rd gear at the most.

We'll dive into push notifications, background sync and other experimental service worker features, showing what they can be used for and how to integrate them in your Angular app. Together we'll see how to make your Angular apps appier and your users happier.

--

Links:

The example application: https://github.com/philnash/ng-sms-messages

Angular PWA guide: https://pwa.ng/
Angular Service Worker docs: https://angular.io/guide/service-worker-intro
swPush docs: https://angular.io/api/service-worker/SwPush
npm web-push: https://www.npmjs.com/package/web-push

@angular/service-worker Issues:
- Background Sync support: https://github.com/angular/angular/issues/22145
- Notification Click event support: https://github.com/angular/angular/issues/22311

npm patch-package: https://www.npmjs.com/package/patch-package
Workbox: https://developers.google.com/web/tools/workbox/

Blog posts
Permissions on the web suck: https://philna.sh/blog/2018/01/08/permissions-on-the-web-suck/
Background Sync: https://www.twilio.com/blog/2017/02/send-messages-when-youre-back-online-with-service-workers-and-background-sync.html
Background Fetch: https://philna.sh/blog/2017/07/04/experimenting-with-the-background-fetch-api/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

June 22, 2018
Tweet

Transcript

  1. SERVICE WORKERS BEYOND THE CACHE

  2. WHY? @philnash

  3. BETTER EXPERIENCES @philnash

  4. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com

  5. None
  6. Service Worker Support ✅ ✅ ✅ ✅ ✅ @philnash

  7. Service workers in Angular $ ng add @angular/pwa @philnash

  8. OFFLINE

  9. { "index": "/index.html", "assetGroups": [{ "name": "app", "installMode": "prefetch", "resources":

    { "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": ["/assets/**"] } }] } @philnash
  10. MANIFEST.JSON ICONS @philnash

  11. PROGRESSIVE WEB APP @philnash

  12. BETTER EXPERIENCES @philnash

  13. APP LIKE FEATURES @philnash

  14. PUSH NOTIFICATIONS BACKGROUND SYNC @philnash

  15. PUSH NOTIFICATIONS

  16. Push Noti cation Support ✅ ✅ ✅ ❌ ✅ @philnash

  17. @philnash

  18. @philnash

  19. @philnash

  20. PUSH NOTIFICATIONS ARE INCREDIBLY USEFUL @philnash

  21. Good noti cations • Appointment reminders • Chat alerts •

    ETA alerts • Event updates @philnash
  22. TIMELY, ACTIONABLE AND PERSONAL @philnash

  23. TIMELY @philnash

  24. IN TIME AT THE RIGHT TIME OF DAY, IN THE

    RIGHT TIME ZONE, THE RIGHT NUMBER OF NOTIFICATIONS @philnash
  25. ACTIONABLE @philnash

  26. Actionable noti cations "Daisy sent you a message" "Your car

    is here" "You can check in now" @philnash
  27. PERSONAL @philnash

  28. Personal noti cations "Daisy sent you a message" "Your car

    is here" "You can check in now" @philnash
  29. HOW TO PUSH @philnash

  30. @philnash

  31. VAPID @philnash

  32. VOLUNTARY APPLICATION SERVER IDENTIFICATION FOR WEB PUSH @philnash

  33. VOLUNTARY APPLICATION SERVER IDENTIFICATION FOR WEB PUSH @philnash

  34. VAPID npx web-push generate-vapid-keys ======================================= Public Key: BPARzOEvMc0MkHDN7TT25vorJ1vA9pmbEVUE6T-C6Ori3f8hylaeflA89QF... Private Key:

    0mLkNulmnEB1jQxvrZ7hyWDfbWMQh2IcdxmeZtEbUIw ======================================= @philnash
  35. VAPID Subscribe to push noti cations with public key Sign

    a JWT with private key when sending a push This identi es your application @philnash
  36. IN ANGULAR? @philnash

  37. swPush @philnash

  38. DEMO

  39. Missing self.addEventListener('notificationclick', (event) => { // handle click }); 01.

    02. 03. @philnash
  40. WE NEED TO TALK ABOUT... @philnash

  41. PERMISSIONS

  42. Ketan Joshi @KetanJ0 Dear website, - I don't want you

    to post notifications to my desktop - I don't want to subscribe to your thing via a popup - I don't want you to know my location - Please stop autoplaying that video - I am angry and sad now 7:17 PM - May 13, 2018 31.3K 8,720 people are talking about this @philnash
  43. WEB DEVELOPERS ARE MAKING USERS SAD AND ANGRY @philnash

  44. Permissions • Push noti cations • Geolocation • Media Devices

    • Bluetooth, MIDI, WebUSB... @philnash
  45. @philnash

  46. @philnash

  47. @philnash

  48. @philnash

  49. @philnash

  50. NO CONTEXT @philnash

  51. STOP THIS!

  52. @philnash

  53. PLEASE

  54. DO NOT DEMAND NOTIFICATION PERMISSIONS ON PAGE LOAD @philnash

  55. WORRY

  56. PERMISSIONS WILL BECOME THE NEW POPUPS @philnash

  57. PERMISSIONS WILL BE REVILED AND DISMISSED BY USERS @philnash

  58. @philnash

  59. @philnash

  60. PLEASE

  61. DO NOT DEMAND NOTIFICATION PERMISSIONS ON PAGE LOAD @philnash

  62. SUGGESTIONS

  63. WAIT @philnash

  64. @philnash

  65. @philnash

  66. UNLESS IT'S OBVIOUS @philnash

  67. @philnash

  68. LET THEM OPT OUT WITHIN YOUR APPLICATION @philnash

  69. @philnash

  70. THE ALTERNATIVE? @philnash

  71. @philnash

  72. USE PUSH NOTIFICATIONS FOR GOOD @philnash

  73. BACKGROUND SYNC

  74. IF CACHES ARE FOR GET REQUESTS @philnash

  75. THEN BACKGROUD SYNC IS FOR POST REQUESTS @philnash

  76. Background sync • Sending messages • Posting comments • Adding

    to a shopping cart • Liking or favouriting @philnash
  77. @philnash

  78. @philnash

  79. BACK ONLINE API

  80. Background Sync Support ✅ ❌ ❌ ❌ ❌ @philnash

  81. INDEXEDDB @philnash

  82. The plan 1. Request fails due to network 2. Save

    request data in IndexedDB 3. User comes back online 4. Sync event res, replay request @philnash
  83. DEMO

  84. Workarounds npm install patch-package @philnash

  85. ISSUES? @philnash

  86. Issues Support background sync: github.com/angular/angular/issues/22145 Handle notificationclick : github.com/angular/angular/issues/22311 @philnash

  87. @philnash

  88. Workbox const bgSyncPlugin = new workbox.backgroundSync.Plugin('myQueueName', { maxRetentionTime: 24 *

    60 // Retry for max of 24 Hours }); workbox.routing.registerRoute( /\/api\/.*\/*.json/, workbox.strategies.networkOnly({ plugins: [bgSyncPlugin] }), 'POST' ); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. @philnash
  89. ENHANCE YOUR FORMS WITH BACKGROUND SYNC @philnash

  90. EXPERIMENTAL

  91. BACKGROUND FETCH

  92. On the page navigator.serviceWorker.ready.then(function(reg) { const url = "https://example.com/largeFile.mp3"; reg.backgroundFetch.fetch('downloads',

    [url], { icons: [], title: 'Downloading largeFile.mp3', totalDownloadSize: 1048576 }); }); 01. 02. 03. 04. 05. 06. 07. 08. @philnash
  93. In the service worker self.addEventListener('backgroundfetched', function(event) { if (event.tag ===

    'downloads') { event.updateUI('largeFile.mp3 downloaded.'); // add the file to the cache } }); 01. 02. 03. 04. 05. 06. @philnash
  94. Background fetch • Audio and video • Games • WebAssembly

    @philnash
  95. CONCLUSION

  96. None
  97. Easy mode $ ng add @angular/pwa @philnash

  98. Not just features • Push noti cations • Background Sync

    • Background Fetch @philnash
  99. BETTER EXPERIENCES @philnash

  100. THANKS!

  101. Icon Credits • Browser by Kimmi Studio from the Noun

    Project • Cloud by Kimmi Studio from the Noun Project • Gears by TS Graphics from the Noun Project • wi by i cons from the Noun Project @philnash
  102. Thanks! @philnash http:/ /philna.sh philnash@twilio.com