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 usw.) können mit demselben Service Worker verbunden sein, jeder über ein einzigartiges ServiceWorker-Objekt.
Ein ServiceWorker-Objekt ist über eine Reihe von Eigenschaften verfügbar:
ServiceWorkerRegistration.activeServiceWorkerGlobalScope.serviceWorkerServiceWorkerContainer.controller— wenn der Service Worker sich im ZustandactivatingoderactivatedbefindetServiceWorkerRegistration.installing— wenn der Service Worker sich im ZustandinstallingbefindetServiceWorkerRegistration.waiting— wenn der Service Worker sich im Zustandinstalledbefindet
Die Eigenschaft ServiceWorker.state und das statechange Ereignis können verwendet werden, um Änderungen im Lebenszykluszustand des zugehörigen Service Workers zu überprüfen und zu beobachten.
Verwandte Lebenszyklus-Ereignisse, wie install und activate werden direkt am Service Worker ausgelöst.
Service Worker ermöglichen den statischen Import von ECMAScript-Modulen, falls unterstützt, unter Verwendung von import.
Dynamischer Import ist durch die Spezifikation untersagt — ein Aufruf von import() wird einen Fehler werfen.
Service Worker können nur im Fensterkontext in einigen oder allen Browsern registriert werden, da das ServiceWorker-Objekt nicht an DedicatedWorkerGlobalScope und SharedWorkerGlobalScope verfügbar ist.
Prüfen Sie die Browser-Kompatibilität für weitere Informationen.
Instanz-Eigenschaften
Die ServiceWorker-Schnittstelle erbt Eigenschaften von ihrem Elternteil, EventTarget.
ServiceWorker.scriptURLSchreibgeschützt-
Gibt die serialisierte Skript-URL des
ServiceWorkerzurück, die als Teil derServiceWorkerRegistrationdefiniert ist. Die URL muss im selben Ursprung wie das Dokument vorliegen, 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.
Instanz-Methoden
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 mittels eines
messageEreignisses im globalen Bereich an den Service Worker übermittelt.
Ereignisse
statechange-
Wird ausgelöst, wenn sich
ServiceWorker.stateändert. error-
Wird ausgelöst, wenn ein Fehler innerhalb des
ServiceWorker-Objekts auftritt.
Beispiele
Dieses Codebeispiel stammt aus dem Service Worker Registrierung-Ereignisse-Beispiel (Live-Demo). Der Code überwacht 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 |