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

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 26, 2017
Tweet

Transcript

  1. BROWSERS BEHIND YOUR BACK

  2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com

  3. AN INTRODUCTION TO SERVICE WORKERS

  4. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

  5. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

  6. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  7. None
  8. A LOOK BACK

  9. XMLHttpRequest

  10. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT

    SERVICE WORKERS
  11. THE BIRTH OF THE SERVICE WORKER

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

    Stylesheets /style/app.css # JavaScripts /js/app.js 01. 02. 03. 04. 05. 06. 07. 08.
  13. “THE APPLICATION CACHE IS A DOUCHEBAG”

  14. The Spec https:/ /w3c.github.io/ServiceWorker/

  15. Browsers 40 27 44 4

  16. The other browsers? preview under consideration

  17. SO WHAT DOES IT REALLY DO?

  18. Install it navigator.serviceWorker.register("/sw.js");

  19. Install it navigator.serviceWorker.register("/sw.js", { scope: "/admin" }); 01. 02. 03.

  20. Install it navigator.serviceWorker.register("/sw.js").then(function(){ console.log(" "); }).catch(function(){ console.log(" "); }); 01.

    02. 03. 04. 05.
  21. It intercepts network requests // sw.js self.addEventListener("fetch", function(event) { //

    do something }); 01. 02. 03. 04.
  22. IT'S A PROXY THAT YOU CONTROL

  23. SECURITY?

  24. HTTPS

  25. LOCALHOST

  26. DEMO

  27. WHY?

  28. WEB VS NATIVE

  29. Native Web Online by default Offline by default Discoverable on

    the web App store installation
  30. Native Web Offline first Offline by default Discoverable on the

    web App store installation
  31. DON'T CARE FOR OFFLINE?

  32. PERFORMANCE

  33. FALLBACKS

  34. None
  35. PUSH NOTIFICATIONS

  36. None
  37. Browsers 42 44 37 4

  38. WITH GREAT POWER…

  39. BACKGROUND SYNC

  40. BROWSERS BEHIND YOUR BACK

  41. EMAIL IS PRETTY COOL

  42. None
  43. ON THE WEB?

  44. None
  45. SENDING MESSAGES

  46. LIKE OR FAVOURITE

  47. ADD SHOPPING TO CART

  48. LEAVING A COMMENT

  49. None
  50. BACKGROUND SYNC API

  51. Background Sync API • Service Worker • IndexedDB • Sync

    Event
  52. DEMO

  53. SERVICE WORKER

  54. None
  55. None
  56. None
  57. DEMO

  58. INDEXEDDB

  59. None
  60. OBJECT STORE

  61. ASYNCHRONOUS

  62. TRANSACTIONAL

  63. LOW LEVEL

  64. Use a library • idb • localForage • Dexie •

    PouchDB
  65. SERVICE WORKERS LOVE PROMISES

  66. 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.
  67. 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.
  68. DEMO

  69. BACKGROUND SYNC API

  70. None
  71. None
  72. BACK ONLINE API

  73. Support 49 beta devdevdevboo

  74. On the page navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('back-online'); }); 01. 02. 03.

  75. In the service worker self.addEventListener('sync', function(event) { if (event.tag ===

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

  77. THE FUTURE

  78. BACKGROUND FETCH API

  79. 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.
  80. In the service worker self.addEventListener('backgroundfetched', function(event) { if (event.tag ===

    'downloads') { event.updateUI('largeFile.mp3 downloaded.'); } }); 01. 02. 03. 04. 05.
  81. In the service worker Other events: • backgroundfetchfail • backgroundfetchabort

    • backgroundfetchclick
  82. PERIODIC SYNC API

  83. 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.
  84. In the service worker self.addEventListener('periodicsync', function(event) { if (event.tag ===

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

  86. Blog post http:/ /bit.ly/bg-sync

  87. SERVICE WORKERS

  88. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

  89. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

  90. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  91. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  92. AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS

  93. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT

    SERVICE WORKERS
  94. THANKS!

  95. Thanks! @philnash http:/ /philna.sh philnash@twilio.com