ServiceWorkerContainer

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.

La interfazServiceWorkerContainer de laAPI Service Worker proporciona un objeto que representa alservice worker como una unidad general en el ecosistema de la red, incluidas las facilidades para registrar, cancelar y actualizar losservice worker, y acceder al estado de losservice worker y sus altas.

Lo que es más importante, expone el métodoServiceWorkerContainer.register() que se usa para registrar losservice worker y la propiedadServiceWorkerContainer.controller que se usa para determinar si la página actual se controla activamente o no.

Propiedades de instancia

ServiceWorkerContainer.controllerRead only: Devuelve un objetoServiceWorker 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únworker activo.
ServiceWorkerContainer.readyRead only: Proporciona una forma de retrasar la ejecución del código hasta que unservice worker esté activo. Devuelve unPromise 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 elServiceWorkerRegistration asociado del documento adquiere un nuevoactiveworker.
errorObsoleto No estándar: Se activa cada vez que se produce un error en losservice worker asociados.
message: Ocurre cuando el objetoServiceWorkerContainer recibe los mensajes entrantes (por ejemplo, a través de una llamadaMessagePort.postMessage()).

Métodos de instancia

ServiceWorkerContainer.register(): Crea o actualiza unServiceWorkerRegistration para elscriptURL dado.
ServiceWorkerContainer.getRegistration(): Obtiene un objetoServiceWorkerRegistration cuyo alcance coincide con la URL del documento proporcionado. El método devuelve unPromise que se resuelve enServiceWorkerRegistration oundefined.
ServiceWorkerContainer.getRegistrations(): Devuelve todos los objetosServiceWorkerRegistration 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 unservice worker a las páginas bajo su control (por ejemplo, enviados a través deClient.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 conservice worker. Si se admite, el código registra elservice 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 elservice 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.");}