What is the web Background Sync API?

Without the Background Sync API, service workers only run while client pages are active (or when they receive a push from a server). The Background Sync API allows service worker jobs to be queued by web applications, so they will run regardless of whether client pages are open. This is designed for offline use-cases like “upload this file when on WiFi”.

The queued job happens as a sync event, which the service worker can listen for:

self.addEventListener("sync", (ev) => {

If you add this to your service worker, and request notification permissions (with Notification.requestPermission(...)), you can trigger a “Syncing!” desktop notification by triggering a sync. In Chrome, you can simulate a sync event by opening Developer Tools, going to Application, and for your service worker, click “Sync” (“Emulate background sync event”).

To queue a sync for real, use ServiceWorkerRegistration.sync.register('someTag'), e.g. by:

navigator.serviceWorker.ready.then(reg => reg.sync.register("someTag"));

My service worker at /service-worker.js shows a notification when it gets a sync event. You can trigger the above JS with this button:

The sync functionality above does not provide any ability to schedule a job for a specified time in the future; nor does it provide for repeating jobs. However, these are provided by a “periodic sync” API, currently in bleeding-edge Chrome. See next blog post!

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.