ServiceWorkerContainer
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.
La interfaz ServiceWorkerContainer
de la API Service Worker proporciona un objeto que representa al service worker como una unidad general en el ecosistema de la red, incluidas las facilidades para registrar, cancelar y actualizar los service worker, y acceder al estado de los service worker y sus altas.
Lo que es más importante, expone el método ServiceWorkerContainer.register()
que se usa para registrar los service worker y la propiedad ServiceWorkerContainer.controller
que se usa para determinar si la página actual se controla activamente o no.
Propiedades de instancia
ServiceWorkerContainer.controller
Read only-
Devuelve un objeto
ServiceWorker
si su estado esactivating
oactivated
(el mismo objeto devuelto porServiceWorkerRegistration.active
). Esta propiedad devuelvenull
durante una solicitud de actualización forzada (Shift + actualizar) o si no hay ningún worker activo. ServiceWorkerContainer.ready
Read only-
Proporciona una forma de retrasar la ejecución del código hasta que un service worker esté activo. Devuelve un
Promise
que nunca se rechazará y que espera indefinidamente hasta que elServiceWorkerRegistration
asociado con la página actual tenga unServiceWorkerRegistration.active
. Una vez que se cumple esa condición, se resuelve conServiceWorkerRegistration
.
Eventos
controllerchange
-
Ocurre cuando el
ServiceWorkerRegistration
asociado del documento adquiere un nuevoactive
worker. error
Obsoleto Non-standard-
Se activa cada vez que se produce un error en los service worker asociados.
message
-
Ocurre cuando el objeto
ServiceWorkerContainer
recibe los mensajes entrantes (por ejemplo, a través de una llamadaMessagePort.postMessage()
).
Métodos de instancia
ServiceWorkerContainer.register()
-
Crea o actualiza un
ServiceWorkerRegistration
para elscriptURL
dado. ServiceWorkerContainer.getRegistration()
-
Obtiene un objeto
ServiceWorkerRegistration
cuyo alcance coincide con la URL del documento proporcionado. El método devuelve unPromise
que se resuelve enServiceWorkerRegistration
oundefined
. ServiceWorkerContainer.getRegistrations()
-
Devuelve todos los objetos
ServiceWorkerRegistration
asociados con unServiceWorkerContainer
en una matriz. El método devuelve unPromise
que se resuelve en una matriz deServiceWorkerRegistration
. ServiceWorkerContainer.startMessages()
-
Inicia explícitamente el flujo de mensajes que se envían desde un service worker a las páginas bajo su control (por ejemplo, enviados a través de
Client.postMessage()
). Esto se puede usar para reaccionar antes a los mensajes enviados, incluso antes de que el contenido de esa página haya terminado de cargarse.
Ejemplos
El siguiente ejemplo primero verifica si el navegador es compatible con service worker. Si se admite, el código registra el service worker y determina si controla activamente la página. Si no es así, solicita al usuario que vuelva a cargar la página para que el service worker pueda tomar el control. El código también informa de cualquier error de registro.
if ("serviceWorker" in navigator) {
// Registre un service worker alojado en la raíz del
// sitio utilizando el alcance predeterminado.
navigator.serviceWorker
.register("/sw.js")
.then((registration) => {
console.log(
"El registro del service worker se realizó correctamente:",
registration,
);
// En este punto, opcionalmente puede hacer algo
// con el registro. Ver https://developer.mozilla.org/es/docs/Web/API/ServiceWorkerRegistration
})
.catch((error) => {
console.error(`El registro del service worker falló: ${error}`);
});
// Independientemente del registro, también mostremos información
// sobre si la página actual está controlada por un service worker
// existente y cuándo cambia ese controlador.
// Primero, haga una verificación única si actualmente
// hay un service worker en control.
if (navigator.serviceWorker.controller) {
console.log(
"Esta página está actualmente controlada por: ",
navigator.serviceWorker.controller,
);
}
// Luego, registre un controlador para detectar cuándo
// un service worker nuevo o actualizado toma el control.
navigator.serviceWorker.oncontrollerchange = () => {
console.log(
"Esta página ahora está controlada por: ",
navigator.serviceWorker.controller,
);
};
} else {
console.log("Los service workers no son compatibles.");
}
Especificaciones
Specification |
---|
Service Workers # serviceworkercontainer-interface |
Compatibilidad con navegadores
BCD tables only load in the browser