Encantado, Service Worker

Service worker es la pieza clave para dar valor añadido a las aplicaciones web, abriendo la puerta a características como notificaciones push y contenido offline.

El Service Worker fue introducido en 2014 y poco a poco los navegadores principales lo han ido implementando hasta convertirse en el día de hoy (Agosto 2018), un factor a tener en cuenta para añadir valor a las aplicaciones web dándoles características nativas del sistema, tales como notificaciones push, contenido sin internet o aparencia de app.

Control de la cache

Un Service Worker no es más que un archivo JavaScript para manejar la respuesta de las peticiones de red de la aplicación, dependiendo de la disponibilidad de la misma red. Está diseñado para ser asíncrono y asistir una aproximación de offline-first (sin conexión), siendo una pieza clave en el mundo de las PWA (Progressive Web Apps). Se posiciona entre medio de la applicación y el recurso, interceptando la petición a la red, y almacenando en cache todo lo que le pidamos. Cuando se pidan estos recursos de nuevo, el Service Worker los ofrecerá sin necesidad de hacer ninguna petición, y por la tanto sin conexión a Internet. Es importante tener presente que es necesaria una primera petición para poder almacenar «algo» en la cache.

Diagrama de flujo a alto nivel del Service Worker

Se puede llegar a configurar diferentes estrategias para servir los recursos. Entre ellas están buscar primero en cache o red. Incluso podemos comprovar si hay una versión más nueva del recurso y actualizarlo silenciosamente en background para servirlo la próxima vez que se pida. También es posible precachear recursos con la primera petición/conexión o establecer un período de caducidad para ellos, forzando refrescarlos pasado un cierto tiempo.

Envío de notificaciones

Usado junto a un web app manifest conseguimos que en dispositivos móbiles la aplicación sea interpretada por los navegadores como una PWA, por lo que al cargar por primera vez la web app, aparecerá una notificación para ser añadida a la pantalla de inicio, dando acceso y aparencia a ella como una app nativa.

Si le sumamos que el Service Worker nos permite comunicarnos con el dispositivo incluso cuando el navegador está cerrado enviándole notificaciones push como cualquier otra app instalada, obtenemos una experiencia para el usuario o usuaria muy parecida a las aplicaciones nativas, con su personalización de barras, orientación o pantalla de carga inicial.

Esto último, implica que el Service Worker puede trabajar en background, y por lo tanto completar tareas que precisan de conexión a la red cuando se recupere ésta si se estaba utilizando la aplicación offline, por ejemplo.

Diagrama de uso a alto nivel de una app offline

Service Worker como estándar

Esto es una introducción/presentación conceptual de lo que Service Worker puede ofrecer. En UXLand nos ayudamos de la herramienta de Google Workbox para configurar al detalle cómo servir los recursos de nuestras aplicaciones. En otro post, os presentaremos con código, como realizamos dicha configuración para que sirva de ejemplo/tutorial.

Espero que os haya picado la curiosidad si no convencido de las ventajas que ofrece, y por si os lo preguntáis, aquí tenéis el estado actualizado de implementación de Service Worker por parte de los navegadores. No hay excusa.