BackgroundFetchUpdateUIEvent

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Note: This feature is only available inService Workers.

TheBackgroundFetchUpdateUIEvent interface of theBackground Fetch API is an event type for thebackgroundfetchsuccess andbackgroundfetchfail events, and provides a method for updating the title and icon of the app to inform a user of the success or failure of a background fetch.

Constructor

BackgroundFetchUpdateUIEvent()Experimental: Creates a newBackgroundFetchUIEvent object. This constructor is not typically used, as the browser creates these objects itself for the backgroundfetchsuccess andbackgroundfetchfail events.

Instance properties

Also inherits properties from its parent,BackgroundFetchEvent.

Instance methods

Also inherits methods from its parent,BackgroundFetchEvent.

BackgroundFetchUpdateUIEvent.updateUI()Experimental: Updates the title and icon in the user interface to show the status of a background fetch. Resolves with a Promise.

Examples

In this example, thebackgroundfetchsuccess event is listened for, indicating that a fetch has completed successfully. TheupdateUI() method is then called, with a message to let the user know the episode they downloaded is ready.

addEventListener("backgroundfetchsuccess", (event) => {  const bgFetch = event.registration;  event.waitUntil(    (async () => {      // Create/open a cache.      const cache = await caches.open("downloads");      // Get all the records.      const records = await bgFetch.matchAll();      // Copy each request/response across.      const promises = records.map(async (record) => {        const response = await record.responseReady;        await cache.put(record.request, response);      });      // Wait for the copying to complete.      await Promise.all(promises);      // Update the progress notification.      event.updateUI({ title: "Episode 5 ready to listen!" });    })(),  );});