ServiceWorkerGlobalScope: backgroundfetchsuccess event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is only available in Service Workers.

The backgroundfetchsuccess event of the ServiceWorkerGlobalScope interface is fired when a background fetch operation has completed successfully: that is, when all network requests in the fetch have completed successfully.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("backgroundfetchsuccess", (event) => {});

onbackgroundfetchsuccess = (event) => {};

Event type

Event properties

Inherits properties from its parent, BackgroundFetchEvent.

BackgroundFetchUpdateUIEvent.updateUI()

Updates the UI of the element that the browser displays to show the progress of the fetch operation.

Description

When a background fetch operation completes successfully (meaning that all individual network requests have completed successfully), the browser starts the service worker, if necessary, and fires the backgroundfetchsuccess event in the service worker's global scope.

In the handler for this event, the service worker can retrieve and store the responses (for example, using the Cache API). To access the response data, the service worker uses the event's registration property.

In the background fetch API, the browser shows a UI element to the user to indicate the progress of the operation. In the backgroundfetchsuccess handler, the service worker can update that UI to show that the operation has completed successfully. To do this, the handler calls the event's updateUI() method, passing in a new title and/or icons.

Examples

Storing responses and updating UI

This event handler stores all responses in the cache, and updates the UI.

js
addEventListener("backgroundfetchsuccess", (event) => {
  const registration = event.registration;

  event.waitUntil(async () => {
    // Open a cache
    const cache = await caches.open("movies");
    // Get all the records
    const records = await registration.matchAll();
    // Cache all responses
    const cachePromises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for caching to finish
    await Promise.all(cachePromises);

    // Update the browser's UI
    event.updateUI({ title: "Move download complete" });
  });
});

Specifications

Specification
Background Fetch
# dom-serviceworkerglobalscope-onbackgroundfetchsuccess

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
backgroundfetchsuccess event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also