BackgroundFetchUpdateUIEvent

title: "BackgroundFetchUpdateUIEvent" slug: Web/API/BackgroundFetchUpdateUIEvent page-type: web-api-interface status:

• experimental browser-compat: api.BackgroundFetchUpdateUIEvent

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 die backgroundfetchsuccess- und backgroundfetchfail-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

Browser-Kompatibilität