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 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() 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.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
InstallEvent
InstallEvent() constructor
Experimental
addRoutes
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch