ExtendableEvent

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.

Hinweis: Diese Funktion ist nur in Service Workers verfügbar.

Das ExtendableEvent-Interface verlängert die Lebensdauer der install- und activate-Ereignisse, die im globalen Kontext als Teil des Service Worker-Lebenszyklus ausgelöst werden. Dies stellt sicher, dass keine funktionalen Ereignisse (wie zum Beispiel FetchEvent) ausgelöst werden, bis Datenbankschemas aktualisiert und veraltete Cache-Einträge gelöscht wurden.

Wenn waitUntil() außerhalb des ExtendableEvent-Handlers aufgerufen wird, sollte der Browser einen InvalidStateError auslösen; beachten Sie auch, dass mehrere Aufrufe aufgestapelt werden und die resultierenden Versprechen zur Liste der erweiterten Lebensdauerversprechen hinzugefügt werden.

Dieses Interface erbt vom Event-Interface.

Hinweis: Dieses Interface ist nur verfügbar, wenn der globale Kontext eine ServiceWorkerGlobalScope ist. Es ist nicht verfügbar, wenn es sich um ein Window oder den Kontext eines anderen Arbeitskontexts handelt.

Konstruktor

ExtendableEvent(): Erstellt ein neues ExtendableEvent-Objekt.

Instanzeigenschaften

Implementiert keine spezifischen Eigenschaften, erbt jedoch Eigenschaften von seinem übergeordneten Interface Event.

Instanzmethoden

Erbt Methoden von seinem übergeordneten Interface Event.

ExtendableEvent.waitUntil(): Verlängert die Lebensdauer des Ereignisses. Es soll im install Ereignishandler für den installing-Worker und im activate Ereignishandler für den active-Worker aufgerufen werden.

Beispiele

Dieser Code-Schnipsel stammt aus dem Beispiel zum Service Worker-Prefetching (siehe Prefetch-Beispiel live.) Der Code ruft ExtendableEvent.waitUntil() in oninstall auf und verzögert die Behandlung des ServiceWorkerRegistration.installing Workers bis zum erfolgreichen Abschluss des übergebenen Versprechens. Das Versprechen wird aufgelöst, wenn alle Ressourcen abgerufen und zwischengespeichert wurden, oder anderweitig, wenn eine Ausnahme auftritt.

Der Code-Schnipsel zeigt auch eine bewährte Methode zur Versionierung von Caches, die vom Service Worker verwendet werden. Obwohl in diesem Beispiel nur ein Cache vorhanden ist, kann derselbe Ansatz für mehrere Caches verwendet werden. Es ordnet einem Cache eine Kurzidentifikation einem spezifischen, versionierten Cachenamen zu.

Hinweis: In Chrome sind Protokollierungsanweisungen über die "Inspect"-Oberfläche des relevanten Service Workers zugänglich, die ü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://9s671d38fq.proxynodejs.usequeue.com/_/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);
      }),
  );
});

Hinweis: Beim Abrufen von Ressourcen ist es äußerst wichtig, {mode: 'no-cors'} zu verwenden, wenn die Möglichkeit besteht, dass die Ressourcen von einem Server bereitgestellt werden, der CORS nicht unterstützt. In diesem Beispiel unterstützt www.chromium.org kein CORS.

Spezifikationen

Specification
Service Workers # extendableevent-interface