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
Promise
auf.
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
BCD tables only load in the browser