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: 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:
ServiceWorkerRegistration.active
ServiceWorkerGlobalScope.serviceWorker
ServiceWorkerContainer.controller
— wenn der Service Worker sich imactivating
- oderactivated
-Zustand befindetServiceWorkerRegistration.installing
— wenn der Service Worker sich iminstalling
-Zustand befindetServiceWorkerRegistration.waiting
— wenn der Service Worker sich iminstalled
-Zustand befindet
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.
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 vonServiceWorkerRegistration
definiert ist. Die URL muss auf demselben Ursprung wie das Dokument sein, das denServiceWorker
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
oderredundant
.
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.
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