ServiceWorkerGlobalScope: backgroundfetchsuccess-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Das backgroundfetchsuccess-Ereignis des ServiceWorkerGlobalScope-Interfaces wird ausgelöst, wenn eine Background Fetch-Operation erfolgreich abgeschlossen wurde: das heißt, wenn alle Netzwerk-Anfragen im Fetch erfolgreich beendet wurden.
Dieses Ereignis kann nicht abgebrochen werden und unterliegt nicht dem Bubbling.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("backgroundfetchsuccess", (event) => { })
onbackgroundfetchsuccess = (event) => { }
Ereignistyp
Beschreibung
Wenn eine Background Fetch-Operation erfolgreich abgeschlossen wird (das bedeutet, dass alle individuellen Netzwerk-Anfragen erfolgreich abgeschlossen wurden), startet der Browser ggf. den Service Worker und löst das backgroundfetchsuccess-Ereignis im globalen Scope des Service Workers aus.
Im Handler für dieses Ereignis kann der Service Worker die Antworten abrufen und speichern (zum Beispiel durch 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 dem Benutzer den Fortschritt der Operation zu zeigen. Im backgroundfetchsuccess-Handler kann der Service Worker dieses UI aktualisieren, um anzuzeigen, dass die Operation erfolgreich abgeschlossen wurde. Dazu ruft der Handler die updateUI()-Methode des Ereignisses auf und übergibt einen neuen Titel und/oder Symbole.
Beispiele
Antworten speichern und UI aktualisieren
Dieser Ereignishandler speichert alle Antworten im Cache und aktualisiert die 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" });
});
});
Spezifikationen
| Spezifikation |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchsuccess |