How to periodically synchronize data in the background

Cecilia Cong
Cecilia Cong
LinkedIn

The modern way

Periodic background sync lets you show fresh content when a progressive web app or service worker-backed page is launched. It does this by downloading data in the background when the app or page is not being used.

Using the Periodic Background Sync API

After the service worker is installed, use the Permissions API to query for periodic-background-sync. You can do this from either a window or a service worker context.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

Registering a periodic sync requires both a tag and a minimum synchronization interval (minInterval). The tag identifies the registered sync so that multiple syncs can be registered. In the example below, the tag name is 'content-sync' and the