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

Browsers behind your back at 4Developers 2017

Browsers behind your back at 4Developers 2017

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
Background Sync explainer: https://github.com/WICG/BackgroundSync/blob/master/explainer.md

Background Fetch API: https://github.com/WICG/background-fetch

Phil Nash

April 03, 2017
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. 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. @philnash
  2. 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. @philnash
  3. IN THE SERVICE WORKER self.addEventListener('sync', function(event) { if (event.tag ===

    'back-online') { // do something } }); 01. 02. 03. 04. 05. @philnash
  4. 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
  5. IN THE SERVICE WORKER self.addEventListener('backgroundfetched', function(event) { if (event.tag ===

    'downloads') { event.updateUI('largeFile.mp3 downloaded.'); } }); 01. 02. 03. 04. 05. @philnash
  6. 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. @philnash
  7. IN THE SERVICE WORKER self.addEventListener('periodicsync', function(event) { if (event.tag ===

    'get-latest-news') { // get the latest news! } }); 01. 02. 03. 04. 05. @philnash
  8. 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 • Database by Yo! Baba from the Noun Project • wifi by i cons from the Noun Project @philnash