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

Browsers behind your back at London JavaScript

Browsers behind your back at London JavaScript

You've probably heard of the magic of a Service Worker when a user is offline, but what can we do for them when they get back online? We can take advantage of the Service Worker's life outside of the page and start to perform actions in the background.

In this talk we'll investigate the Background Sync API and the APIs that it depends upon, we'll look at what you might use it for and see it in action. Once that is behind us we can take a peek into the future and even more background tasks with a look at the Periodic Sync API.

--

Links:

Build the demo from the talk: https://www.twilio.com/blog/2017/02/send-messages-when-youre-back-online-with-service-workers-and-background-sync.html
The app from the demo: https://github.com/philnash/sms-messages-app/tree/background-sync

HTML5Rocks intro to service worker: http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Service Worker spec: https://github.com/w3c/ServiceWorker
Is Service Worker Ready Yet? https://jakearchibald.github.io/isserviceworkerready/
And resources: https://jakearchibald.github.io/isserviceworkerready/resources.html
Service Worker Cookbook: http://www.serviceworke.rs/
Addy Osmani - Offline Storage for Progressive Web Apps - https://bit.ly/cache-vs-db
Background Sync explainer: https://github.com/WICG/BackgroundSync/blob/master/explainer.md
Background Fetch API: https://github.com/WICG/background-fetch
Twilio Blog: Web powered SMS inbox with push notifications: https://www.twilio.com/blog/2016/02/web-powered-sms-inbox-with-service-worker-push-notifications.html

Phil Nash

April 26, 2017
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. The Application Cache CACHE MANIFEST # Version 7 CACHE: #

    Stylesheets /style/app.css # JavaScripts /js/app.js 01. 02. 03. 04. 05. 06. 07. 08.
  2. Callbacks var request = indexedDB.open('messages', 1) request.onupgradeneeded = function(event) {

    var upgradeDb = event.result.target; upgradeDb.createObjectStore('outbox', { autoIncrement : true, keyPath: 'id' }); } request.onsuccess = function(event) { window.db = event.result.target; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10.
  3. Promises idb.open('messages', 1, function(upgradeDb) { upgradeDb.createObjectStore('outbox', { autoIncrement : true,

    keyPath: 'id' }); }).then(function(db) { return window.db = db; }) 01. 02. 03. 04. 05. 06. 07.
  4. In the service worker self.addEventListener('sync', function(event) { if (event.tag ===

    'back-online') { // do something } }); 01. 02. 03. 04. 05.
  5. 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.
  6. In the service worker self.addEventListener('backgroundfetched', function(event) { if (event.tag ===

    'downloads') { event.updateUI('largeFile.mp3 downloaded.'); } }); 01. 02. 03. 04. 05.
  7. On the page navigator.serviceWorker.ready.then(function(reg) { reg.periodicSync.register({ tag: 'get-latest-news', // default:

    '' minPeriod: 12 * 60 * 60 * 1000, // default: 0 powerState: 'avoid-draining', // default: 'auto' networkState: 'avoid-cellular' // default: 'online' }); }); 01. 02. 03. 04. 05. 06. 07. 08.
  8. In the service worker self.addEventListener('periodicsync', function(event) { if (event.tag ===

    'get-latest-news') { // get the latest news! } }); 01. 02. 03. 04. 05.