InstallEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

* Some parts of this feature may have varying levels of support.

Der Parameter, der in eine install-Ereignis-Handler-Funktion übergeben wird, die InstallEvent-Schnittstelle repräsentiert eine Installationsaktion, die auf dem ServiceWorkerGlobalScope eines ServiceWorker ausgelöst wird. Als Kind 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 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

Specification
Service Workers # installevent