BackgroundFetchUpdateUIEvent
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.
Note: This feature is only available in Service Workers.
The BackgroundFetchUpdateUIEvent interface of the Background Fetch API is an event type for the backgroundfetchsuccess and backgroundfetchfail 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 new
BackgroundFetchUIEventobject. This constructor is not typically used, as the browser creates these objects itself for thebackgroundfetchsuccessandbackgroundfetchfailevents.
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, the backgroundfetchsuccess event is listened for, indicating that a fetch has completed successfully. The updateUI() 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!" }); })(), ); }); Specifications
| Specification |
|---|
| Background Fetch # background-fetch-update-ui-event |