Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.



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/

Phil Nash

June 22, 2018

More Decks by Phil Nash

Other Decks in Programming


  1. { "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

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

    is here" "You can check in now" @philnash
  4. Personal noti cations "Daisy sent you a message" "Your car

    is here" "You can check in now" @philnash
  5. 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
  6. 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
  7. Background sync • Sending messages • Posting comments • Adding

    to a shopping cart • Liking or favouriting @philnash
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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