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.

* Some parts of this feature may have varying levels of support.

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

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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 Schreibgeschützt

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 Schreibgeschützt

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

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
ServiceWorker
Support for ECMAScript modules
error event
postMessage
scriptURL
state
statechange event

Legend

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

Full support
Full support
No support
No support
See implementation notes.

Siehe auch