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

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
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
35. PUSH NOTIFICATIONS
37. Browsers 42 44 37 4
38. WITH GREAT POWER…
39. BACKGROUND SYNC
40. BROWSERS BEHIND YOUR BACK
41. EMAIL IS PRETTY COOL
43. ON THE WEB?
45. SENDING MESSAGES
46. LIKE OR FAVOURITE
47. ADD SHOPPING TO CART
48. LEAVING A COMMENT
50. BACKGROUND SYNC API
51. Background Sync API • Service Worker • IndexedDB • Sync Event
52. DEMO
53. SERVICE WORKER
57. DEMO
58. INDEXEDDB
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
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