Web/API/PeriodicSyncEvent

Draft This page is not complete.

The PeriodicSyncEvent interface of the Web Periodic Background Synchronization API provides a way to run tasks in the service worker with network connectivity.

An instance of this event is passed to the ServiceWorkerGlobalScope.onperiodicsync handler. This happens periodically, at an interval greater than or equal to that set in the PeriodicSyncManager.register() method. Other implementation-specific factors such as the user's engagement with the site decide the actual interval.

Constructor

PeriodicSyncEvent.PeriodicSyncEvent(): Creates a new PeriodicSyncEvent object. This constructor is not typically used. The browser creates these objects itself and provides them to ServiceWorkerGlobalScope.onperiodicsync callback.

Properties

PeriodicSyncEvent.tag Read only: Returns the developer-defined identifier for this PeriodicSyncEvent. Multiple tags can be used by the web app to run different periodic tasks at different frequencies.

Methods

Inherits methods from its parent ExtendableEvent.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/PeriodicSyncEvent" target="_top"><rect x="1" y="1" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="86" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">PeriodicSyncEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Examples

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());
  }
});

fetchAndCacheLatestNews is a developer defined function.

Specifications

Specification	Status	Comment
Web Periodic Background SynchronizationThe definition of 'PeriodicSyncEvent' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`PeriodicSyncEvent` Experimental'Non-standard'	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
`PeriodicSyncEvent()` constructor Experimental'Non-standard'	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
`tag` Experimental'Non-standard'	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.