Ander San Miguel

Desarrollador Web

13/05/2017

Service Workers, casi estamos ahí

Hace unos meses me preguntaron por «algo de la web, algo que mole», no es la primera vez que me preguntan algo así y la naturaleza abierta de la web es mi respuesta de cabecera, porque es lo mejor que tiene, es alucinante pensar en el impacto que ha tenido y tendrá la web (si no nos la cargamos) precisamente por su naturaleza abierta, pero esta vez que mi interlocutor tiene un perfil técnico se me ocurrió contarle sobre lo que me tenía más loco en aquel momento, y todavía me tiene: Service Workers.

Basicamente, un service worker es un programa escrito en javascript dependiente de una página web que se ejecuta en segundo plano en el navegador del usuario pero que no está directamente relacionado con la ejecución de la página. Una de sus gracias es que se ejecuta (o está esperando a recibir orden de ejecutarse) incluso cuando la página no está activa, no se está viendo. Vamos, es un alien.

Esto permite, entre otras, dos cosas muy presentes en el desarrollo de aplicaciones móviles y son dos cosas que cierran un poco la brecha entre las aplicaciones nativas y las webapps: trabajar offline y notificaciones.

web vs native

No me voy a poner a explicar los detalles técnicos, ya hay mucha documentación maravillosa sobre ellos, y además, seguramente no nos tendremos que preocupar de ellos mucho tiempo, porque según mi predicción (y yo siempre acierto, bueno, no) es una de las cosas que se van a solucionar mediante herramientas, ya hay alguna que aunque todavía les falta un poco para ser instalar las dependencias y olvidarte, llegará a un momento donde simplemente les diremos la estrategía que queremos seguir (precache o postcache), un listado con excepciones y un par de cosas más y nos generarán un worker del que nos podremos fiar. Supongo que también llegarán (no he buscado, que igual ya hay) las herramientas en las que con tener una clave de un servicio de notificaciones nos bastará.

Yo de momento me he puesto a jugar y la verdad es que mola un montón, es muy sencillo de concepto y el diseño es genial, tiene una cosa que al principio me costó bastante entender porque no es como lo hubiera diseñado yo, pero una vez que entendí como iba y porque la verdad es que es mejor así.

Invalidación de la caché, porque claro, estamos hablando de un bicho (o alien) que se pone entre el navegador y el servidor y si le pides al servidor algo que ya tiene cacheado no te va a servir la versión del servidor (aunque sea distinta), que tampoco es muy importante porque como todos hacemos todo bien a la primera y no tenemos que hacer actualizaciones de nada... ejem. Esto es fácil, actualizamos la versión del worker y ya el navegador invalida la caché del anterior. Pero claro, ahora llegamos a la clave, el ciclo de vida del worker, basta con cambiar el número de versión del worker para que el navegador se desacargue el nuevo, pero no basta con que tenga el nuevo para que lo instale, no instala el nuevo hasta que el viejo deja de estar activo y esto no ocurre hasta que se cierran todas las ventanas que lo están utilizando y se vuelva a cargar la página. Afortunadamente hay un mecanismo de comunicación entre el service worker y la página con el que el service worker le avisa a la página de que hay uno nuevo esperando y la página le puede decir al navegador que coja el nuevo. Que así explicado en texto corrido es un lío, pero es más lío no entender porqué la página no actualiza el contenido, además, en el enlace anterior hay muchos gráficos donde se explica el ciclo de vida mucho mejor.

Hay otra cosa acerca de su diseño que me ganó desde el primer momento, progressive enhancement, porque claro, mirando el soporte que tiene en navegadores... mucho rojo se ve ahí, pero da igual, y esa es su gracia. Si un navegador no tiene soporte pues no se lo instalas y punto, al ser una capa que va por fuera de la propia página los usuarios con navegadores sin soporte simplemente no disfrutaran de las mejoras que conllevan, así que no es como otras cosas, esto se puede usar ya.

Un pequeño consejo para el que quiera usarlo ya en producción en algún sitio importante, ten muy claro el ciclo de vida y ten en marcha algún sistema para invalidar los workers viejos, que sin eso 100% atado puedes tener a usuarios con contenido cacheado bastante tiempo. Aunque, por diseño, independientemente de lo que tu quieras el navegador le da vida de un día máximo antes de forzar una actualización.

Desarrollo Web

Esto es a lo que me dedico, así que es lo que más vas a encontrar en esta página.

Contacto

Esta sección está clara, si quieres contactar conmigo, este es un buen sitio.