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.
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:
ServiceWorkerRegistration.activeServiceWorkerGlobalScope.serviceWorkerServiceWorkerContainer.controller— wenn sich der Service Worker im ZustandactivatingoderactivatedbefindetServiceWorkerRegistration.installing— wenn sich der Service Worker im ZustandinstallingbefindetServiceWorkerRegistration.waiting— wenn sich der Service Worker im Zustandinstalledbefindet
Die Eigenschaft ServiceWorker.state und das statechange-Ereignis können verwendet werden, um Änderungen im Lebenszyklus-Zustand des dem Objekt zugeordneten Service Workers zu überprüfen und zu beobachten. Bezogene Lebenszyklus-Ereignisse wie install und activate werden direkt am Service Worker ausgelöst.
Service Worker erlauben den statischen Import von ECMAScript-Modulen, wenn unterstützt, mittels import.
Dynamischer Import ist durch die Spezifikation nicht erlaubt — ein Aufruf von import() wirft einen Fehler.
Service Worker können nur im Fenster-Kontext in einigen oder allen Browsern registriert werden, da das ServiceWorker-Objekt nicht im DedicatedWorkerGlobalScope und SharedWorkerGlobalScope verfügbar ist. Überprüfen Sie die Browser-Kompatibilität für weitere Informationen.
Instanz-Eigenschaften
Das ServiceWorker-Interface erbt Eigenschaften von seinem Eltern-Interface, EventTarget.
ServiceWorker.scriptURLSchreibgeschützt-
Gibt die serialisierte Skript-URL des
ServiceWorkerzurück, die als Teil derServiceWorkerRegistrationdefiniert ist. Die URL muss dieselbe Herkunft haben wie das Dokument, das denServiceWorkerregistriert. ServiceWorker.stateSchreibgeschützt-
Gibt den Zustand des Service Workers zurück. Es gibt einen der folgenden Werte zurück:
parsed,installing,installed,activating,activated, oderredundant.
Instanz-Methoden
Das ServiceWorker-Interface erbt Methoden von seinem Eltern-Interface, EventTarget.
ServiceWorker.postMessage()-
Sendet eine Nachricht — bestehend aus einem beliebigen strukturiert klonbaren JavaScript-Objekt — an den Service Worker. Die Nachricht wird dem Service Worker über ein
message-Ereignis in dessen globalem Geltungsbereich übermittelt.
Ereignisse
statechange-
Wird ausgelöst, wenn sich
ServiceWorker.stateändert. error-
Wird ausgelöst, wenn ein Fehler im
ServiceWorker-Objekt auftritt.
Beispiele
Dieser Codeausschnitt stammt aus dem Beispiel für die Registrierung von Service Worker-Ereignissen (Live-Demo). Der Code hört auf jede Änderung im ServiceWorker.state und gibt dessen Wert zurück.
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 |