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 |