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/

Transcript

1. SERVICE WORKERS BEYOND THE CACHE
2. WHY? @philnash
3. BETTER EXPERIENCES @philnash
4. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
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
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