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.

Event ExtendableEvent BackgroundFetchEvent BackgroundFetchUpdateUIEvent

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.

js
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