ServiceWorkerGlobalScope: backgroundfetchsuccess-Ereignis

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

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

onbackgroundfetchsuccess = (event) => {};

Ein BackgroundFetchUpdateUIEvent.

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.

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.

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

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" });
  });
});

• Background Fetch API