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

Browsers behind your back (Fusion Meetup)

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

March 23, 2017
Tweet

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