Konstruktor

InstallEvent() Experimentell

Erstellt ein neues InstallEvent-Objekt.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternobjekt, ExtendableEvent.

Instanz-Methoden

Erbt Methoden von seinem Elternobjekt, ExtendableEvent.

addRoutes() Experimentell

Gibt eine oder mehrere statische Routen an, die Regeln für das Abrufen festgelegter Ressourcen definieren, die bereits vor dem Start des Service Workers verwendet werden.

Beispiele

Dieser Codeausschnitt stammt aus dem Service Worker Prefetch-Beispiel (siehe prefetch live in Aktion.) Der Code ruft ExtendableEvent.waitUntil() in ServiceWorkerGlobalScope.oninstall auf und verzögert die Behandlung des ServiceWorkerRegistration.installing-Workers als installiert, bis das übergebene Promise erfolgreich aufgelöst wird. Das Promise wird aufgelöst, wenn alle Ressourcen abgerufen und zwischengespeichert wurden oder wenn eine Ausnahme auftritt.

Der Codeausschnitt zeigt auch eine bewährte Vorgehensweise für die 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 einem Cache einen verkürzten Bezeichner zu einem spezifischen, versionierten Cache-Namen zu.

Hinweis: Protokollierungsanweisungen sind in Google Chrome über die "Inspect"-Schnittstelle für den entsprechenden Service Worker sichtbar, der über chrome://serviceworker-internals aufgerufen wird.

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) =>
        cache.addAll(
          urlsToPrefetch.map(
            (urlToPrefetch) => 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

Browser-Kompatibilität

Siehe auch

• install Ereignis
• NotificationEvent
• Promise
• Fetch API