ServiceWorker

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.

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.

Die ServiceWorker-Schnittstelle der Service Worker API bietet eine Referenz zu einem 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:

Die ServiceWorker.state-Eigenschaft und das statechanged-Ereignis können verwendet werden, um Änderungen im Lebenszyklus-Zustand des zugehörigen Service Workers des Objekts zu überprüfen und zu beobachten. Verwandte Lebenszyklusereignisse, wie install und activate, werden am Service Worker selbst ausgelöst.

Service Worker erlauben, falls unterstützt, die statische Einbindung von ECMAScript-Modulen mittels import. Dynamischer Import ist durch die Spezifikation verboten — der Aufruf von import() wird einen Fehler werfen.

Service Worker können nur im Fensterscope in einigen oder allen Browsern registriert werden, da das ServiceWorker-Objekt nicht zu DedicatedWorkerGlobalScope und SharedWorkerGlobalScope freigegeben wird. Überprüfen Sie die Browser-Kompatibilität für Informationen.

EventTarget ServiceWorker

Instanzeigenschaften

Die ServiceWorker-Schnittstelle erbt Eigenschaften von ihrem Elternteil, EventTarget.

ServiceWorker.scriptURL Nur lesbar

Gibt die serialisierte Skript-URL des ServiceWorker zurück, die als Teil von ServiceWorkerRegistration definiert ist. Die URL muss auf demselben Ursprung wie das Dokument sein, das den ServiceWorker registriert.

ServiceWorker.state Nur lesbar

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

Instanzmethoden

Die ServiceWorker-Schnittstelle erbt Methoden von ihrem Elternteil, EventTarget.

ServiceWorker.postMessage()

Sendet eine Nachricht — bestehend aus einem beliebigen strukturell-klonbaren JavaScript-Objekt — an den Service Worker. Die Nachricht wird mittels eines message-Ereignisses an dessen globalem Scope zum Service Worker übertragen.

Ereignisse

statechange

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

error

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

Beispiele

Dieser Codeausschnitt stammt aus dem Service Worker Registration-Events-Beispiel (Live-Demo). Der Code hört auf jede Änderung in 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