ServiceWorker: state-Eigenschaft

Ein String, der einen der folgenden Werte annehmen kann:

"parsed"

Der Anfangszustand eines Service Workers, nachdem er heruntergeladen und als ausführbar bestätigt wurde. Ein Service Worker wird nie in diesen Zustand aktualisiert, daher wird dies niemals der Wert des statechange-Ereignisses sein.

"installing"

Der Service Worker in diesem Zustand wird als installierender Worker betrachtet. Während dieses Zustands kann ExtendableEvent.waitUntil() innerhalb des install-Ereignis-Handlers aufgerufen werden, um die Lebensdauer des installierenden Workers zu verlängern, bis das übergebene Promise erfolgreich aufgelöst wird. Dies wird hauptsächlich verwendet, um sicherzustellen, dass der Service Worker nicht aktiv ist, bis alle grundlegenden Caches gefüllt sind.

"installed"

Der Service Worker in diesem Zustand wird als wartender Worker betrachtet.

"activating"

Der Service Worker in diesem Zustand wird als aktiver Worker betrachtet. Während dieses Zustands kann ExtendableEvent.waitUntil() innerhalb des onactivate-Ereignis-Handlers aufgerufen werden, um die Lebensdauer des aktiven Workers zu verlängern, bis das übergebene Promise erfolgreich aufgelöst wird. Keine funktionalen Ereignisse werden gesendet, bis der Zustand aktiviert wird.

"activated"

Der Service Worker in diesem Zustand wird als aktiver Worker betrachtet, der bereit ist, funktionale Ereignisse zu bearbeiten.

"redundant"

Ein neuer Service Worker ersetzt den aktuellen Service Worker, oder der aktuelle Service Worker wird aufgrund eines Installationsfehlers verworfen.

Dieses Code-Snippet ist aus dem Service Worker registration-events Beispiel (Live-Demo). Der Code hört auf jede Änderung im ServiceWorker.state und gibt dessen Wert zurück.

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);
  });
}