Módulo 4: Tecnologías web avanzadas

4.2.3 Introducción a los service workers

Las Progressive Web Apps tienen que ser rápidas y fáciles de instalar, por lo que deben funcionar online, sin conexión y en conexiones intermitentes y lentas. Para lograrlo, necesitamos almacenar en caché el shell de la aplicación a través de un service worker. De este modo, estará siempre disponible de forma rápida y fiable. 

¿Qué es un service worker?

Un service worker es una secuencia de comandos que el navegador ejecuta en segundo plano, de forma independiente a la página web. Este proceso sirve para abrir la puerta a funciones que no requieren una página web ni la interacción del usuario. Actualmente incluyen funciones como notificaciones push y sincronización en segundo plano. En el futuro, los service workers admitirán otras funciones como la sincronización periódica o el geoperimetraje. La característica principal que se describe en este tutorial es la capacidad de interceptar y gestionar las solicitudes de red, incluida la gestión programática de una caché de respuestas.

La razón de que esta API sea tan interesante es que permite dar soporte a experiencias sin conexión, lo que brinda a los desarrolladores un control total de la experiencia.

Antes de los service workers, existía otra API, llamada AppCache, que proporcionaba a los usuarios una experiencia offline en la Web. Los principales problemas de AppCache son el número de incógnitas y el hecho de que, si bien el diseño funciona especialmente bien para aplicaciones web de una sola página, no es tan bueno para los sitios web de varias páginas. Service workers se diseñó para evitar estos puntos conflictivos comunes.

Debes tener en cuenta los siguientes aspectos de service workers:

  • Es un worker de JavaScript, así que no puede acceder al DOM directamente. A cambio, un service worker puede responder a los mensajes que se envían mediante la interfaz postMessage para comunicarse con las páginas que controla. Además, dichas páginas pueden manipular el DOM si fuera necesario.
  • Service worker es un proxy de red programable que te permite controlar el modo en que se gestionan las solicitudes de red de tu página.
  • Se cancela cuando no se utiliza y se reinicia la siguiente vez que se necesita, por lo que no puedes depender del estado global dentro de los controladores onfetch y onmessage de un service worker. Si necesitas conservar y volver a utilizar información de un reinicio a otro, los service workers tienen acceso a la API IndexedDB.
  • Los service workers utilizan en gran medida las promesas, así que si para ti son una novedad, deberías dejar de leer y echar un vistazo a Promesas de JavaScript: introducción.

El ciclo de vida del service worker

Un service worker tiene un ciclo de vida totalmente independiente de tu página web.

Para instalar un service worker para su sitio, debes registrarlo. Este proceso se realiza en el código JavaScript de la página. Al registrar el service worker, el navegador iniciará su paso de instalación en segundo plano.

Lo normal es que, durante el paso de instalación, quieras guardar en caché algunos recursos estáticos. Si todos los archivos se almacenan correctamente en caché, el service worker quedará instalado. Si alguno de los archivos no consigue descargarse y almacenarse en caché, el paso de instalación fallará y el service worker no se activará (es decir, no se instalará). Si eso sucede, no te preocupes; se volverá a intentar la próxima vez. Pero eso significa que, si se instala, los recursos estáticos estarán en la caché.

Una vez instalado, seguirá el paso de activación, que supone una oportunidad perfecta para realizar cualquier tarea de administración de cachés antiguos. Este tema se tratará en la sección de actualización de service workers.

Después del paso de activación, el service worker controlará todas las páginas de su ámbito, aunque la página que registró al service worker en primera instancia no se controlará hasta que se vuelva a cargar. Una vez que el service worker tenga el control, estará en uno de dos estados: o bien se cancelará para ahorrar memoria, o gestionará los eventos de recuperación y de mensaje que se producen cuando se realiza una petición o un mensaje de red desde tu página.

A continuación, puedes ver una versión muy simplificada del ciclo de vida del service worker en su primera instalación.

¿Con el service worker es necesario replantearse la estructura de las aplicaciones?

Los service workers conllevan algunos cambios sutiles en la arquitectura de la aplicación. En lugar de comprimir toda la aplicación en una cadena HTML, se utiliza el estilo AJAX, que tiene sus ventajas. De este modo, tienes un shell (que siempre se almacena en caché y siempre se puede iniciar sin la red) y el contenido que se actualiza periódicamente y se gestiona de manera independiente.

Las consecuencias de esta separación son importantes. En la primera visita, puedes procesar contenido en el servidor e instalar el service worker en el cliente. En las visitas siguientes, solo tendrás que solicitar datos.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?