ServiceWorkerGlobalScope: backgroundfetchsuccess-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Dieses Feature ist nur verfügbar in Service Workers.

Das backgroundfetchsuccess-Ereignis der Schnittstelle ServiceWorkerGlobalScope wird ausgelöst, wenn ein Background Fetch-Vorgang erfolgreich abgeschlossen wurde, das heißt, wenn alle Netzwerk-Anfragen in dem Fetch erfolgreich abgeschlossen wurden.

Dieses Ereignis kann nicht abgebrochen werden und es blubbert nicht.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("backgroundfetchsuccess", (event) => {});

onbackgroundfetchsuccess = (event) => {};

Ereignistyp

Ereigniseigenschaften

Erbt Eigenschaften von seinem Elternteil, BackgroundFetchEvent.

BackgroundFetchUpdateUIEvent.updateUI()

Aktualisiert die Benutzeroberfläche des Elements, das der Browser anzeigt, um den Fortschritt des Fetch-Vorgangs zu zeigen.

Beschreibung

Wenn ein Background Fetch-Vorgang erfolgreich abgeschlossen wird (was bedeutet, dass alle einzelnen Netzwerk-Anfragen erfolgreich abgeschlossen wurden), startet der Browser den Service Worker, falls erforderlich, und löst das backgroundfetchsuccess-Ereignis im globalen Bereich des Service Workers aus.

Im Handler für dieses Ereignis kann der Service Worker die Antworten abrufen und speichern (zum Beispiel unter Verwendung der Cache-API). Um auf die Antwortdaten zuzugreifen, verwendet der Service Worker die registration-Eigenschaft des Ereignisses.

In der Background Fetch API zeigt der Browser ein UI-Element an, um den Fortschritt des Vorgangs anzuzeigen. Im backgroundfetchsuccess-Handler kann der Service Worker dieses UI-Element aktualisieren, um anzuzeigen, dass der Vorgang erfolgreich abgeschlossen wurde. Dazu ruft der Handler die updateUI()-Methode des Ereignisses auf, wobei er einen neuen Titel und/oder Symbole übergibt.

Beispiele

Antworten speichern und UI aktualisieren

Dieser Ereignishandler speichert alle Antworten im Cache und aktualisiert die Benutzeroberfläche.

js
addEventListener("backgroundfetchsuccess", (event) => {
  const registration = event.registration;

  event.waitUntil(async () => {
    // Open a cache
    const cache = await caches.open("movies");
    // Get all the records
    const records = await registration.matchAll();
    // Cache all responses
    const cachePromises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for caching to finish
    await Promise.all(cachePromises);

    // Update the browser's UI
    event.updateUI({ title: "Move download complete" });
  });
});

Spezifikationen

Specification
Background Fetch
# dom-serviceworkerglobalscope-onbackgroundfetchsuccess

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch