InstallEvent
Der Parameter, der an eine install
Ereignishandler-Funktion übergeben wird, die InstallEvent
-Schnittstelle, repräsentiert eine Installationsaktion, die im ServiceWorkerGlobalScope
eines ServiceWorker
ausgelöst wird. Als ein Nachfolger von ExtendableEvent
stellt es sicher, dass funktionale Ereignisse wie FetchEvent
während der Installation nicht ausgelöst werden.
Diese Schnittstelle erbt von der ExtendableEvent
Schnittstelle.
Konstruktor
InstallEvent()
Experimentell-
Erstellt ein neues
InstallEvent
-Objekt.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Elternteil, ExtendableEvent
.
Instanz-Methoden
Erbt Methoden von seinem Elternteil, ExtendableEvent
.
addRoutes()
Experimentell-
Gibt eine oder mehrere statische Routen an, die Regeln für das Abrufen bestimmter Ressourcen definieren, die bereits vor dem Start des Service Workers verwendet werden.
Beispiele
Dieser Code-Schnipsel stammt aus dem Service Worker Prefetch-Beispiel (siehe Prefetch in Aktion.) Der Code ruft ExtendableEvent.waitUntil()
in ServiceWorkerGlobalScope.oninstall
auf und verzögert die Behandlung des gerade installierten ServiceWorkerRegistration.installing
, bis das übergebene Versprechen erfolgreich aufgelöst wird. Das Versprechen wird aufgelöst, wenn alle Ressourcen abgerufen und zwischengespeichert wurden oder wenn eine Ausnahme auftritt.
Der Code-Ausschnitt zeigt auch eine bewährte Methode zur Versionierung von Caches, die vom Service Worker verwendet werden. Obwohl dieses Beispiel nur einen Cache hat, können Sie diesen Ansatz für mehrere Caches verwenden. Der Code ordnet eine Kurzform eines Identifikators für einen Cache einem spezifischen, versionierten Cachenamen zu.
Hinweis: Protokollierungsaussagen sind in Google Chrome über die "Inspect"-Schnittstelle für den entsprechenden Service Worker zugänglich über chrome://serviceworker-internals sichtbar.
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};
self.addEventListener("install", (event) => {
const urlsToPrefetch = [
"./static/pre_fetched.txt",
"./static/pre_fetched.html",
"https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
];
console.log(
"Handling install event. Resources to pre-fetch:",
urlsToPrefetch,
);
event.waitUntil(
caches
.open(CURRENT_CACHES["prefetch"])
.then((cache) => {
return cache
.addAll(
urlsToPrefetch.map((urlToPrefetch) => {
return new Request(urlToPrefetch, { mode: "no-cors" });
}),
)
.then(() => {
console.log("All resources have been fetched and cached.");
});
})
.catch((error) => {
console.error("Pre-fetching failed:", error);
}),
);
});
Spezifikationen
Specification |
---|
Service Workers # installevent |
Browser-Kompatibilität
BCD tables only load in the browser