BackgroundFetchUpdateUIEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
title: "BackgroundFetchUpdateUIEvent" slug: Web/API/BackgroundFetchUpdateUIEvent page-type: web-api-interface status:
- experimental browser-compat: api.BackgroundFetchUpdateUIEvent
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Die BackgroundFetchUpdateUIEvent-Schnittstelle der Background Fetch API ist ein Ereignistyp für die backgroundfetchsuccess- und backgroundfetchfail-Ereignisse und bietet eine Methode, um den Titel und das Icon der App zu aktualisieren, um den Benutzer über den Erfolg oder Misserfolg eines Hintergrundabrufs zu informieren.
Konstruktor
BackgroundFetchUpdateUIEvent()Experimentell-
Erstellt ein neues
BackgroundFetchUIEvent-Objekt. Dieser Konstruktor wird typischerweise nicht verwendet, da der Browser diese Objekte selbst für diebackgroundfetchsuccess- undbackgroundfetchfail-Ereignisse erstellt.
Instanz-Eigenschaften
Erbt auch Eigenschaften von seinem Elternteil, BackgroundFetchEvent.
Instanz-Methoden
Erbt auch Methoden von seinem Elternteil, BackgroundFetchEvent.
BackgroundFetchUpdateUIEvent.updateUI()Experimentell-
Aktualisiert den Titel und das Icon in der Benutzeroberfläche, um den Status eines Hintergrundabrufs anzuzeigen. Löst sich mit einem
Promiseauf.
Beispiele
In diesem Beispiel wird auf das backgroundfetchsuccess-Ereignis gehört, was darauf hinweist, dass ein Abruf erfolgreich abgeschlossen wurde. Die updateUI()-Methode wird dann mit einer Nachricht aufgerufen, um den Benutzer wissen zu lassen, dass die heruntergeladene Episode bereit ist.
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!" });
})(),
);
});
Spezifikationen
| Specification |
|---|
| Background Fetch> # background-fetch-update-ui-event> |
Browser-Kompatibilität
Loading…