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

Browsers behind your back at Devoxx Poland

Browsers behind your back at Devoxx Poland

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
Background Fetch example: https://fan-hubcap.glitch.me/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

June 23, 2017
Tweet

Transcript

  1. None
  2. PHIL NASH @philnash http:/ /philna.sh philnash@twilio.com

  3. BROWSERS BEHIND YOUR BACK

  4. EMAIL IS PRETTY COOL @philnash

  5. None
  6. ON THE WEB? @philnash

  7. PROGRESSIVE WEB APPS

  8. @philnash

  9. SENDING MESSAGES @philnash

  10. LIKE OR FAVOURITE @philnash

  11. ADD SHOPPING TO CART @philnash

  12. LEAVING A COMMENT @philnash

  13. @philnash

  14. BACKGROUND SYNC API

  15. BACKGROUND SYNC API • Service Worker • IndexedDB • Sync

    Event @philnash
  16. DEMO

  17. SERVICE WORKER

  18. @philnash

  19. @philnash

  20. @philnash

  21. INDEXEDDB

  22. @philnash

  23. OBJECT STORE @philnash

  24. ASYNCHRONOUS @philnash

  25. TRANSACTIONAL @philnash

  26. LOW LEVEL @philnash

  27. USE A LIBRARY • idb • localForage • Dexie •

    PouchDB @philnash
  28. SERVICE WORKERS LOVE PROMISES @philnash

  29. 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
  30. 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
  31. INDEXEDDB Want to know more? “An empty database in everybody's

    pocket” Here at 13:20! @philnash
  32. DEMO

  33. BACKGROUND SYNC API

  34. @philnash

  35. @philnash

  36. BACK ONLINE API

  37. SUPPORT 49 5.4 devdevdevboo @philnash

  38. ON THE PAGE navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('back-online'); }); 01. 02. 03.

    @philnash
  39. IN THE SERVICE WORKER self.addEventListener('sync', function(event) { if (event.tag ===

    'back-online') { // do something } }); 01. 02. 03. 04. 05. @philnash
  40. DEMO

  41. THE FUTURE

  42. PERIODIC SYNC API

  43. 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
  44. 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
  45. BACKGROUND FETCH API

  46. 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
  47. IN THE SERVICE WORKER self.addEventListener('backgroundfetched', function(event) { if (event.tag ===

    'downloads') { event.updateUI('largeFile.mp3 downloaded.'); } }); 01. 02. 03. 04. 05. @philnash
  48. IN THE SERVICE WORKER Other events: • backgroundfetchfail • backgroundfetchabort

    • backgroundfetchclick @philnash
  49. DEMO

  50. BLOG POST http:/ /bit.ly/bg-sync BACKGROUND FETCH EXAMPLE https:/ /fan-hubcap.glitch.me/ @philnash

  51. THANKS

  52. Write for the Twilio blog! TWILIOVOICES.COM @philnash

  53. 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
  54. THANKS! @philnash http:/ /philna.sh philnash@twilio.com