ServiceWorker
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2018.
* Some parts of this feature may have varying levels of support.
Contexto seguro: Esta función está disponible solo en contextos seguros (HTTPS), en algunos o todos los navegadores que lo soportan.
Nota: Esta característica está disponible en Web Workers.
La interfaz ServiceWorker de la API de Service Worker proporciona una referencia a un service worker. Múltiples contextos de navegación (por ejemplo, páginas, workers, etc.) pueden estar asociados con el mismo service worker, cada uno a través de un objeto ServiceWorker único.
Se puede acceder a un objeto ServiceWorker a través de varias propiedades:
ServiceWorkerRegistration.activeServiceWorkerGlobalScope.serviceWorkerServiceWorkerContainer.controller— cuando el service worker está en estadoactivatingoactivatedServiceWorkerRegistration.installing— cuando el service worker está en estadoinstallingServiceWorkerRegistration.waiting— cuando el service worker está en estadoinstalled
La propiedad ServiceWorker.state y el evento statechange se pueden usar para comprobar y observar los cambios en el estado del ciclo de vida del service worker asociado al objeto.
Los eventos relacionados del ciclo de vida, como install y activate, se disparan en el propio service worker.
Los service workers permiten la importación estática de módulos ECMAScript, si son compatibles, usando import.
La importación dinámica no está permitida por la especificación; llamar a import() lanzará una excepción.
Los service workers solo se pueden registrar en el ámbito Window en algunos o todos los navegadores, ya que el objeto ServiceWorker no está expuesto en DedicatedWorkerGlobalScope ni en SharedWorkerGlobalScope.
Consulta la compatibilidad con navegadores para más información.
Propiedades de instancia
La interfaz ServiceWorker hereda propiedades de su padre, EventTarget.
ServiceWorker.scriptURLRead only-
Devuelve la URL del script serializado del
ServiceWorkerdefinido como parte deServiceWorkerRegistration. La URL debe tener el mismo origen que el documento que registra elServiceWorker. ServiceWorker.stateRead only-
Devuelve el estado del service worker. Retorna uno de los siguientes valores:
parsed,installing,installed,activating,activated, oredundant.
Métodos de instancia
La interfaz ServiceWorker hereda métodos de su padre, EventTarget.
ServiceWorker.postMessage()-
Envía un mensaje — que consiste en cualquier objeto JavaScript clonable de forma estructurada — al service worker. El mensaje se transmite al service worker mediante un evento
messageen su ámbito global.
Eventos
statechange-
Se dispara cuando
ServiceWorker.statecambia. error-
Se dispara cuando ocurre un error dentro del objeto
ServiceWorker.
Ejemplos
Este fragmento de código proviene del ejemplo de eventos de registro de service worker (demo en vivo). El código escucha cualquier cambio en ServiceWorker.state y devuelve su valor.
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) => {
// Algo salió mal durante el registro. El archivo service-worker.js
// podría no estar disponible o contener un error de sintaxis.
});
} else {
// El navegador actual no soporta service workers.
// Quizás es demasiado antiguo o no estamos en un Contexto Seguro.
}
Especificaciones
| Specification |
|---|
| Service Workers Nightly # serviceworker-interface |