Los usuarios esperan que las apps se inicien de forma confiable en conexiones de red lentas o inestables, o incluso sin conexión. Esperan que el contenido con el que interactuaron más recientemente, como pistas de medios o boletos e itinerarios, esté disponible y se pueda usar. Cuando una solicitud no es posible, esperan que la app se los indique en lugar de fallar o bloquearse de forma silenciosa. Y quieren que todo esto suceda rápidamente. Como puedes ver en Los milisegundos generan millones, incluso una mejora de 0.1 segundos en los tiempos de carga puede aumentar las conversiones hasta en un 10%. Los service workers son la herramienta que permite que tu app web progresiva (AWP) cumpla con las expectativas de los usuarios.
Cuando una app solicita un recurso que está dentro del alcance del service worker, este intercepta la solicitud y actúa como proxy de red, incluso si el usuario está sin conexión. Luego, puede decidir si debe entregar el recurso desde la caché con la API de Cache Storage, entregarlo desde la red como si no hubiera ningún service worker activo o crearlo a partir de un algoritmo local. Esto te permite brindar una experiencia de alta calidad similar a la de una app de la plataforma, incluso cuando tu app no tiene conexión.
Cómo registrar un service worker
Antes de que un service worker tome el control de tu página, debe registrarse para tu PWA. Esto significa que, la primera vez que un usuario abre tu PWA, todas sus solicitudes de red van directamente a tu servidor porque el service worker aún no controla tus páginas.
Después de verificar si el navegador admite la API de Service Worker, tu PWA puede registrar un service worker. Después de que se carga, el trabajador de servicio se configura entre tu APW y la red, intercepta las solicitudes y entrega las respuestas correspondientes.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Cómo verificar si hay un service worker registrado
Para verificar si se registró un trabajador de servicio, usa las herramientas para desarrolladores en tu navegador favorito.
En Firefox y los navegadores basados en Chromium (Microsoft Edge, Google Chrome o Samsung Internet), haz lo siguiente:
- Abre las herramientas para desarrolladores y, luego, haz clic en la pestaña Application.
- En el panel izquierdo, selecciona Service Workers.
- Comprueba que la URL de la secuencia de comandos del trabajador de servicio aparezca con el estado "Activado". (Para obtener más información, consulta Ciclo de vida). En Firefox, el estado puede ser "En ejecución" o "Detenido".
En Safari, haz lo siguiente:
- Haz clic en Develop > Service Workers.
- Verifica si hay una entrada con el origen actual en este menú. Si haces clic en esa entrada, se abrirá un inspector sobre el contexto del service worker.
Alcance
La carpeta en la que se encuentra tu service worker determina su alcance. Un service worker que se encuentra en example.com/my-pwa/sw.js puede controlar cualquier navegación en la ruta my-pwa o en sus subrutas, como example.com/my-pwa/demos/. Los service workers solo pueden controlar los elementos (páginas, workers, colectivamente "clientes") que se encuentran dentro de su alcance.
Este alcance se aplica a las pestañas del navegador y las ventanas de PWA.
Solo se permite un service worker por alcance. Cuando un service worker está activo y en ejecución, por lo general, solo hay una instancia disponible, sin importar cuántos clientes (ventanas de PWA o pestañas del navegador) haya en la memoria.
Safari tiene una administración de alcance más compleja, conocida como particiones, que afecta la forma en que los alcances funcionan con los iframes multidominio. Para obtener más información sobre la implementación de WebKit, consulta su entrada de blog.
Lifecycle
Los service workers tienen un ciclo de vida que determina cómo se instalan, independientemente de la instalación de tu AWP.
El ciclo de vida del service worker comienza con su registro. Luego, el navegador intenta descargar y analizar el archivo del service worker. Si el análisis se realiza correctamente, se activa el evento install del trabajador de servicio. El evento install solo se activa una vez.
La instalación del service worker se realiza de forma silenciosa, sin necesidad de permiso del usuario, incluso si este no instala la PWA. La API de Service Worker está disponible incluso en plataformas que no admiten la instalación de AWP, como Safari y Firefox en dispositivos de escritorio.
Después de la instalación, el service worker debe activarse antes de poder controlar sus clientes, incluida tu PWA. Cuando el service worker está listo para controlar a sus clientes, se activa el evento activate. Sin embargo, de forma predeterminada, un service worker activado no puede administrar la página que lo registró hasta la próxima vez que navegues a esa página recargándola o volviendo a abrir la AWP.
Puedes escuchar eventos en el alcance global del service worker con el objeto self:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Actualiza un trabajador de servicio
Los service workers se actualizan cuando el navegador detecta que el service worker que controla el cliente y la nueva versión del archivo del service worker del servidor son diferentes en bytes.
Después de una instalación exitosa, el nuevo service worker espera a activarse hasta que el service worker anterior ya no controle ningún cliente. Este estado se denomina "en espera", y es la forma en que el navegador garantiza que solo se ejecute una versión de tu service worker a la vez.
Actualizar una página o volver a abrir la PWA no hará que el nuevo service worker tome el control. El usuario debe cerrar todas las pestañas y ventanas que usen el service worker actual, o salir de ellas, y, luego, volver a navegar para que el nuevo service worker tome el control. Para obtener más información, consulta El ciclo de vida del trabajador de servicio.
Duración del service worker
Un service worker instalado y registrado puede administrar todas las solicitudes de red dentro de su alcance. Se ejecuta en su propio subproceso, con activación y finalización controladas por el navegador, lo que le permite funcionar incluso antes de que se abra tu APW o después de que se cierre. Los service workers se ejecutan en su propio subproceso, pero es posible que el estado en la memoria no persista entre las ejecuciones de un service worker, por lo que debes asegurarte de que todo lo que quieras reutilizar en cada ejecución esté disponible en IndexedDB o en algún otro almacenamiento persistente.
Si aún no se está ejecutando, un service worker se inicia cada vez que se envía una solicitud de red en su alcance o cuando recibe un evento de activación, como una sincronización periódica en segundo plano o un mensaje push.
Los service workers se cierran si están inactivos durante unos segundos o si están ocupados durante demasiado tiempo. Los tiempos para esto varían según el navegador. Si se finalizó un service worker y se produce un evento que lo iniciaría, se reinicia.
Funciones
Un service worker registrado y activo usa un subproceso con un ciclo de vida de ejecución completamente diferente del subproceso principal de tu APW. Sin embargo, de forma predeterminada, el archivo del service worker no tiene ningún comportamiento. No almacenará en caché ni publicará ningún recurso; estas son acciones que tu código debe realizar. Descubrirás cómo hacerlo en los siguientes capítulos.
Las capacidades de los Service Workers no son solo para el proxy o la entrega de solicitudes HTTP. Otras funciones están disponibles sobre ella para otros fines, como la ejecución de código en segundo plano, las notificaciones push web y el procesamiento de pagos. Analizaremos estas incorporaciones en Funciones.