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 das UI des Elements, das der Browser anzeigt, um den Fortschritt der Fetch-Operation darzustellen.

Wenn eine Background-Fetch-Operation erfolgreich abgeschlossen wird (was bedeutet, dass alle individuellen 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 (z. B. mit 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 dem Benutzer den Fortschritt der Operation anzuzeigen. Im backgroundfetchsuccess-Handler kann der Service Worker dieses UI aktualisieren, um zu zeigen, dass die Operation erfolgreich abgeschlossen wurde. Dazu ruft der Handler die updateUI()-Methode des Ereignisses auf und übergibt einen neuen Titel und/oder Icons.

Dieser Ereignis-Handler speichert alle Antworten im Cache und aktualisiert das UI.

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