Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Draft This page is not complete.
The Web Periodic Background Synchronization API provides a way to register tasks to be run in a service worker
at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests.
Web Periodic Background Synchronization Concepts and Usage
The Periodic Background Sync API allows web applications to alert their service worker to make any updates, at a periodic time interval. Uses may include fetching latest content whilst a device is connected to wifi, or allowing background updates to an application.
The minimum time interval is set when the API is invoked; however the user agent might also take into account other factors which affect when the service worker receives the event. For instance previous website engagement, or connection to a known network.
The PeriodicSyncManager
interface is available through ServiceWorkerRegistration.periodicSync
. A unique tag identifier is set to 'name' the sync event, which can then be listened for within the ServiceWorker
script. Once the event is received you can then run any functionality available, such as updating caches or fetching new resources.
As this API relies on service workers, functionality provided by this API is only available in a secure context.
At the time of writing, the Web Periodic Background Synchronization API is only available through an installed Progressive Web App
Web Periodic Background Synchronization Interfaces
PeriodicSyncManager
- Registers tasks to be run in a service worker at periodic intervals with network connectivity. These tasks are referred to as periodic background sync requests.
PeriodicSyncEvent
- Represents a synchronization event, sent to the
global scope
of aServiceWorker
. It provides a way to run tasks in the service worker with network connectivity.
Service Worker Additions
The following additions to the Service Worker API
are specified in the Periodic Background Sync specification to provide an entry point for using Periodic Background Sync.
ServiceWorkerRegistration.periodicSync
Read only- Returns a reference to the
PeriodicSyncManager
interface for registering tasks to run at specific intervals. ServiceWorkerGlobalScope.onperiodicsync
- An event handler fired whenever a
periodicsync
event occurs. This happens at timed intervals, that are specified when registering aPeriodicSyncManager
.
Examples
The following examples show how to use the interface.
Requesting a Periodic Background Sync
The following asynchronous function registers a periodic background sync at a minimum interval of one day from a browsing context:
async function registerPeriodicNewsCheck() {
const registration = await navigator.serviceWorker.ready;
try {
await registration.periodicSync.register('fetch-news', {
minInterval: 24 * 60 * 60 * 1000,
});
} catch {
console.log('Periodic Sync could not be registered!');
}
}
Verifying a Background Periodic Sync by Tag
This code checks to see if a Periodic Background Sync task with a given tag is registered.
navigator.serviceWorker.ready.then(registration => {
registration.periodicSync.getTags().then(tags => {
if (tags.includes('get-latest-news'))
skipDownloadingLatestNewsOnPageLoad();
});
});
Removing a Periodic Background Sync Task
The following code removes a Periodic Background Sync task to stop articles syncing in the background.
navigator.serviceWorker.ready.then(registration => {
registration.periodicSync.unregister('get-latest-news');
});
Listening for a Periodic Background Sync within a Service Worker
The following example shows how to respond to a periodic sync event in the service worker.
self.addEventListener('periodicsync', event => {
if (event.tag == 'get-latest-news') {
event.waitUntil(fetchAndCacheLatestNews());
}
});
Specifications
Specification | Status | Comment |
Web Periodic Background Synchronization | Working Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome
Full support 80 |
Edge
Full support 80 |
Firefox
No support No |
IE
No support No |
Opera
Full support 67 |
Safari
No support No |
WebView Android
Full support 80 |
Chrome Android
Full support 80 |
Firefox Android
No support No |
Opera Android
Full support 57 |
Safari iOS
No support No |
Samsung Internet Android
Full support 13.0 | |
Chrome
Full support 80 |
Edge
Full support 80 |
Firefox
No support No |
IE
No support No |
Opera
Full support 67 |
Safari
No support No |
WebView Android
Full support 80 |
Chrome Android
Full support 80 |
Firefox Android
No support No |
Opera Android
Full support 57 |
Safari iOS
No support No |
Samsung Internet Android
Full support 13.0 | |
Chrome
Full support 80 |
Edge
Full support 80 |
Firefox
No support No |
IE
No support No |
Opera
Full support 67 |
Safari
No support No |
WebView Android
Full support 80 |
Chrome Android
Full support 80 |
Firefox Android
No support No |
Opera Android
Full support 57 |
Safari iOS
No support No |
Samsung Internet Android
Full support 13.0 | |
Chrome
Full support 80 |
Edge
Full support 80 |
Firefox
No support No |
IE
No support No |
Opera
Full support 67 |
Safari
No support No |
WebView Android
Full support 80 |
Chrome Android
Full support 80 |
Firefox Android
No support No |
Opera Android
Full support 57 |
Safari iOS
No support No |
Samsung Internet Android
Full support 13.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
See also
Web Periodic Background Synchronization API by Mozilla Contributors is licensed under CC-BY-SA 2.5.