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 der ServiceWorkerGlobalScope-Schnittstelle wird ausgelöst, wenn ein Background Fetch erfolgreich abgeschlossen wurde, das heißt, wenn alle zugehörigen Netzwerkanfragen erfolgreich abgeschlossen wurden.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergegeben.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("backgroundfetchsuccess", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onbackgroundfetchsuccess = (event) => { }
Ereignistyp
Beschreibung
Wenn ein Background Fetch erfolgreich abgeschlossen wird (das heißt, wenn alle einzelnen Netzwerkanfragen erfolgreich abgeschlossen wurden), startet der Browser bei Bedarf den Service Worker und löst das backgroundfetchsuccess-Ereignis im globalen Gültigkeitsbereich des Service Workers aus.
Im Handler für dieses Ereignis kann der Service Worker die Antworten abrufen und speichern, beispielsweise mithilfe der Cache-API. Um auf die Antwortdaten zuzugreifen, verwendet der Service Worker die registration-Eigenschaft des Ereignisses.
Bei der Background Fetch API zeigt der Browser dem Benutzer ein UI-Element an, das den Fortschritt des Vorgangs angibt. Im backgroundfetchsuccess-Handler kann der Service Worker dieses UI aktualisieren, um anzuzeigen, dass der Vorgang erfolgreich abgeschlossen wurde. Dazu ruft der Handler die updateUI()-Methode des Ereignisses auf und übergibt einen neuen Titel und/oder Icons.
Beispiele
Antworten speichern und UI aktualisieren
Dieser Event-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" });
});
});
Spezifikationen
| Spezifikation |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchsuccess |