Registro de un service worker desde HTML

Un service worker es un archivo JavaScript que se ejecuta en segundo plano, separado de cualquier página, e intercepta las solicitudes de red correspondientes a su ámbito. Permite ofrecer compatibilidad sin conexión, notificaciones push, sincronización en segundo plano y cargas repetidas más rápidas mediante la caché.

Registre el worker desde un script de la página: navigator.serviceWorker.register("/sw.js"). El navegador descarga /sw.js, lo analiza, ejecuta su evento install y comienza a interceptar las solicitudes correspondientes al ámbito del registro.

Los navegadores antiguos no admiten service workers. Detecte siempre la funcionalidad con "serviceWorker" in navigator antes de llamar a register; de lo contrario, la llamada produce una excepción en los navegadores que no tienen esta API. No es viable usar un polyfill: los service workers no se pueden simular porque requieren integración a nivel del navegador.

El ámbito es el prefijo de ruta que controla el worker. De forma predeterminada, el ámbito es el directorio del archivo del worker: /sw.js controla todas las URL bajo /. Para registrar un worker con un ámbito más profundo desde una ubicación de archivo diferente, establezca la opción de ámbito y sirva también la cabecera Service-Worker-Allowed.

Coloque sw.js en la raíz de la aplicación (/sw.js) para que su ámbito predeterminado cubra todo el sitio. Las rutas más profundas, como /app/sw.js, limitan el ámbito a /app/ y sus subrutas, lo que rara vez es lo que necesita.

Registre el worker después de que se haya cargado la página para evitar que compita por el ancho de banda durante el renderizado crítico: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Las funciones de la PWA se activarán en las visitas posteriores sin retrasar la primera.

El navegador comprueba automáticamente si se ha actualizado sw.js, normalmente cada 24 horas y durante la mayoría de las cargas de página. Si el contenido del archivo ha cambiado, el nuevo worker se descarga, se instala y espera en el estado "waiting" hasta que se cierren todas las pestañas existentes; entonces se activa.

registration.update() activa manualmente una comprobación de actualizaciones. self.skipWaiting(), dentro del nuevo sw.js, lo activa inmediatamente sin esperar a que se cierren las pestañas. Combine ambos para que siempre se ejecute el worker más reciente, a costa de volver a descargar recursos durante la sesión.

registration.unregister() elimina el worker. Resulta útil durante el desarrollo si un worker defectuoso está provocando problemas en el sitio. En Chrome DevTools, Application → Service Workers ofrece un botón «Unregister» con la misma finalidad durante la depuración.

Registrar un worker mediante HTTP, sin HTTPS, falla silenciosamente: los service workers requieren un origen seguro, HTTPS o localhost durante el desarrollo. Si el registro no tiene efecto, compruebe en la consola el mensaje «An SSL certificate error occurred».

El worker no tiene acceso al DOM. Para enviar mensajes, use navigator.serviceWorker.controller.postMessage() desde la página y self.addEventListener("message", handler) en el worker, y viceversa. Esto resulta útil para invalidar la caché, comprobar versiones y gestionar eventos personalizados.

En la primera visita, el worker se instala y comienza a controlar las páginas únicamente después de que se vuelva a cargar la página. Para controlar inmediatamente la primera navegación, llame a self.clients.claim() en el evento activate; resulta útil para aplicaciones que priorizan el funcionamiento sin conexión.

¿Por qué los service workers deben servirse mediante HTTPS o localhost?

Registre los service workers desde el JavaScript de la página con navigator.serviceWorker.register("/sw.js") después de detectar la funcionalidad. Coloque sw.js en la raíz de la aplicación para obtener un ámbito completo. Regístrelo durante la carga para evitar que compita con el renderizado crítico. Las actualizaciones se comprueban automáticamente de forma periódica; puede forzarlas con registration.update o skipWaiting. Se requiere HTTPS para evitar la inyección de workers maliciosos.