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
BackgroundFetchUIEvent
object. This constructor is not typically used, as the browser creates these objects itself for thebackgroundfetchsuccess
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, 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 |
Browser compatibility
BCD tables only load in the browser