ServiceWorker

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Das ServiceWorker-Interface der Service Worker API bietet eine Referenz auf einen Service Worker. Mehrere Browsing-Kontexte (z. B. Seiten, Worker, etc.) können mit demselben Service Worker verbunden sein, jeder durch ein einzigartiges ServiceWorker-Objekt.

Ein ServiceWorker-Objekt ist über eine Reihe von Eigenschaften verfügbar:

Das ServiceWorker-Interface löst eine Reihe von Lebenszyklusereignissen — install und activate — sowie funktionale Ereignisse inklusive fetch aus. Ein ServiceWorker-Objekt hat einen zugeordneten ServiceWorker.state, der sich auf seinen Lebenszyklus bezieht.

Service Worker erlauben die statische Einbindung von ECMAScript-Modulen, falls unterstützt, mittels import. Die dynamische Einbindung ist durch die Spezifikation untersagt — ein Aufruf von import() wird einen Fehler auslösen.

Service Worker können nur im Window-Kontext in einigen oder allen Browsern registriert werden, da das ServiceWorker-Objekt nicht in DedicatedWorkerGlobalScope und SharedWorkerGlobalScope zur Verfügung steht. Überprüfen Sie die Browser-Kompatibilität für Informationen.

EventTarget ServiceWorker

Instanz-Eigenschaften

Das ServiceWorker-Interface erbt Eigenschaften von seinem Elternteil, EventTarget.

ServiceWorker.scriptURL Nur lesbar

Gibt die serialisierte Skript-URL des ServiceWorker zurück, die als Teil der ServiceWorkerRegistration definiert ist. Die URL muss mit dem gleichen Ursprung wie das Dokument übereinstimmen, das den ServiceWorker registriert.

ServiceWorker.state Nur lesbar

Gibt den Zustand des Service Workers zurück. Es kann einen der folgenden Werte zurückgeben: parsed, installing, installed, activating, activated oder redundant.

Instanz-Methoden

Das ServiceWorker-Interface erbt Methoden von seinem Elternteil, EventTarget.

ServiceWorker.postMessage()

Sendet eine Nachricht — bestehend aus einem beliebigen struktur-klonbaren JavaScript-Objekt — an den Service Worker. Die Nachricht wird über ein message-Ereignis im globalen Kontext auf den Service Worker übertragen.

Ereignisse

statechange

Wird ausgelöst, wenn sich der ServiceWorker.state ändert.

error

Wird ausgelöst, wenn ein Fehler innerhalb des ServiceWorker-Objekts auftritt.

Beispiele

Dieser Codeausschnitt stammt aus dem Beispiel für Service Worker-Registrierungsereignisse (Live-Demo). Der Code überwacht jede Änderung im ServiceWorker.state und gibt dessen Wert zurück.

js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then((registration) => {
      let serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", (e) => {
          // logState(e.target.state);
        });
      }
    })
    .catch((error) => {
      // Something went wrong during registration. The service-worker.js file
      // might be unavailable or contain a syntax error.
    });
} else {
  // The current browser doesn't support service workers.
  // Perhaps it is too old or we are not in a Secure Context.
}

Spezifikationen

Specification
Service Workers
# serviceworker-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch