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.

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.

Event ExtendableEvent InstallEvent

Konstruktor

InstallEvent()

Erstellt ein neues InstallEvent-Objekt.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, ExtendableEvent.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, ExtendableEvent.

addRoutes()

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.

js
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

Siehe auch