Browsers behind your back (Fusion Meetup)

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

Transcript

1. BROWSERS BEHIND YOUR BACK
2. PHIL NASH @philnash http:/ /philna.sh philnash@twilio.com
3. BROWSERS BEHIND YOUR BACK
4. SERVICE WORKER
5. @philnash
6. @philnash
7. @philnash
8. @philnash
9. @philnash
10. BACKGROUND SYNC API
11. BACK ONLINE API
12. DEMO
13. PERIODIC SYNC API
14. navigator.serviceWorker.ready.then(function(reg) { registration.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
15. DEMO
16. THANKS
17. 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 @philnash
18. THANKS! @philnash http:/ /philna.sh philnash@twilio.com