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.
Please take two minutes to fill out our short survey.
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 auf einen Service Worker. Mehrere Browsing-Kontexte (z.B. Seiten, Worker, usw.) können mit demselben Service Worker verbunden sein, jeder durch ein einzigartiges ServiceWorker-Objekt.
Ein ServiceWorker-Objekt ist über verschiedene 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 statechanged-Ereignis können verwendet werden, um Änderungen im Lebenszyklusstatus des zugehörigen Service Workers zu überprüfen und zu beobachten. Verwandte Lebenszyklusereignisse wie install und activate werden am Service Worker selbst ausgelöst.
Service Worker erlauben den statischen Import von ECMAScript-Modulen, falls unterstützt, mittels import.
Dynamischer Import ist durch die Spezifikation nicht erlaubt – ein Aufruf von import() führt zu einem Fehler.
Service Worker können nur im Window-Bereich 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.
Instanzeigenschaften
Die ServiceWorker-Schnittstelle erbt Eigenschaften von ihrem Elternteil, EventTarget.
ServiceWorker.scriptURLSchreibgeschützt-
Gibt die serialisierte Script-URL des
ServiceWorkerzurück, die als Teil derServiceWorkerRegistrationdefiniert ist. Die URL muss auf demselben Ursprung wie das Dokument liegen, 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,activatedoderredundant.
Instanzmethoden
Die ServiceWorker-Schnittstelle erbt Methoden von ihrem Elternteil, EventTarget.
ServiceWorker.postMessage()-
Sendet eine Nachricht — bestehend aus einem beliebigen strukturiert-klonbaren JavaScript-Objekt — an den Service Worker. Die Nachricht wird über ein
message-Ereignis in ihrem globalen Bereich an den Service Worker übermittelt.
Ereignisse
statechange-
Wird ausgelöst, wenn sich der Zustand des
ServiceWorker.stateändert. error-
Wird ausgelöst, wenn ein Fehler im
ServiceWorker-Objekt auftritt.
Beispiele
Dieser Code-Snippet stammt aus dem Beispiel für Service Worker-Registrierungsereignisse (Live-Demo). Der Code lauscht 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 |