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 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 eine Background-Fetch-Operation erfolgreich abgeschlossen wurde: das heißt, wenn alle Netzwerk-Anfragen in diesem Fetch erfolgreich abgeschlossen wurden.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht gebubbelt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("backgroundfetchsuccess", (event) => { })
onbackgroundfetchsuccess = (event) => { }
Ereignistyp
Ereigniseigenschaften
Erbt Eigenschaften von seinem Elternteil, BackgroundFetchEvent.
BackgroundFetchUpdateUIEvent.updateUI()-
Aktualisiert das UI des Elements, das der Browser anzeigt, um den Fortschritt der Fetch-Operation darzustellen.
Beschreibung
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.
Beispiele
Antworten speichern und UI aktualisieren
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" });
});
});
Spezifikationen
| Specification |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchsuccess |
Browser-Kompatibilität
Loading…