Browsers behind your back at FullStackConf 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
Background Fetch example: https://fan-hubcap.glitch.me/
Background Fetch blog post: https://philna.sh/blog/2017/07/04/experimenting-with-the-background-fetch-api/

Transcript

1. BROWSERS BEHIND YOUR BACK
2. PHIL NASH @philnash http:/ /philna.sh philnash@twilio.com
3. BROWSERS BEHIND YOUR BACK
4. EMAIL IS PRETTY COOL @philnash
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. DEMO
32. AN EMPTY DATABASE IN EVERY POCKET Tomorrow at 12:30 @philnash
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 POSTS Background sync: http:/ /bit.ly/bg-sync Background fetch: http:/ /bit.ly/bg-fetch @philnash
51. THANKS
52. 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
53. THANKS! @philnash http:/ /philna.sh philnash@twilio.com