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

Browsers behind your back at MobCon 2017

Browsers behind your back at MobCon 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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

March 26, 2017
Tweet

Transcript

  1. BROWSERS BEHIND YOUR BACK

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

  4. BROWSERS BEHIND YOUR BACK

  5. EMAIL IS PRETTY COOL @philnash

  6. None
  7. ON THE WEB? @philnash

  8. PROGRESSIVE WEB APPS

  9. @philnash

  10. SENDING MESSAGES @philnash

  11. LIKE OR FAVOURITE @philnash

  12. ADD SHOPPING TO CART @philnash

  13. LEAVING A COMMENT @philnash

  14. @philnash

  15. BACKGROUND SYNC API

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

    Event @philnash
  17. DEMO

  18. SERVICE WORKER

  19. @philnash

  20. @philnash

  21. @philnash

  22. DEMO

  23. INDEXEDDB

  24. @philnash

  25. OBJECT STORE @philnash

  26. ASYNCHRONOUS @philnash

  27. TRANSACTIONAL @philnash

  28. LOW LEVEL @philnash

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

    PouchDB @philnash
  30. SERVICE WORKERS LOVE PROMISES @philnash

  31. 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
  32. 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
  33. DEMO

  34. BACKGROUND SYNC API

  35. @philnash

  36. @philnash

  37. BACK ONLINE API

  38. SUPPORT 49 beta devdevdevboo @philnash

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

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

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

  42. THE FUTURE

  43. PERIODIC SYNC API

  44. 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
  45. 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
  46. DEMO

  47. BLOG POST http:/ /bit.ly/bg-sync @philnash

  48. THANKS

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