Service Workers: Inmersión profunda

Service Workers: Los scripts en segundo plano que impulsan las aplicaciones web modernas

Los service workers son un tipo especial de archivo JavaScript que se ejecuta en segundo plano, separado de su página web. Actúan como un proxy de red programable, interceptando solicitudes y decidiendo cómo responder. Esto es lo que hace posibles las funciones web modernas como el soporte sin conexión, las notificaciones push y la sincronización en segundo plano.

Cómo funcionan los Service Workers

Un service worker es registrado por su página web y luego instalado en el navegador. Una vez instalado, puede interceptar cada solicitud de red realizada por su página. Cuando su página solicita un archivo, el service worker puede servirlo desde la caché, obtenerlo de la red, o una combinación de ambos. Incluso puede crear respuestas personalizadas.

Los service workers se ejecutan en su propio hilo, completamente separado de la página principal. No tienen acceso al DOM, pero pueden comunicarse con la página a través de mensajes. También tienen un ciclo de vida bien definido: instalar, activar y buscar. El evento de instalación es donde se almacenan en caché los archivos de su aplicación. El evento de activación es donde se limpian las cachés antiguas. Y el evento de búsqueda es donde se manejan las solicitudes.

Estrategias de caché

El patrón más común es almacenar en caché el shell de su aplicación — el HTML, CSS y JavaScript — durante la instalación. Cuando el usuario visita, el service worker sirve el shell desde la caché al instante, luego obtiene contenido nuevo en segundo plano. Esto le da al usuario algo que ver de inmediato, mientras actualiza la página cuando llega el nuevo contenido.

Para imágenes y respuestas de API, puede usar una estrategia de caché primero: verifique la caché, y si el archivo está allí, sírvalo de inmediato. Si no, obténgalo de la red y guárdelo en caché para la próxima vez. Para datos críticos que deben ser frescos, use una estrategia de red primero: intente primero la red y recurra a la caché si la red no está disponible.

Ciclo de vida y actualizaciones

Los service workers tienen un ciclo de vida que puede ser complicado de entender al principio. Cuando un usuario visita su sitio, si el service worker ha cambiado (aunque sea un solo byte), la nueva versión se instala en segundo plano. Pero no toma el control hasta que todas las páginas que usan la versión anterior estén cerradas. Esto evita inconsistencias entre versiones antiguas y nuevas.

Puede forzar que el nuevo service worker tome el control de inmediato usando skipWaiting, y decirle que reclame todas las páginas abiertas usando clients.claim. Pero tenga cuidado — esto puede causar problemas si la nueva versión espera estructuras de datos diferentes a la anterior.

Más allá del almacenamiento en caché: Push y Sync

Los service workers permiten otras dos funciones importantes. Las notificaciones push permiten que el servidor envíe mensajes al usuario incluso cuando el sitio web no está abierto. El service worker recibe el evento push, crea una notificación y el usuario la ve. La sincronización en segundo plano permite que el service worker difiera acciones hasta que el usuario tenga una conexión a Internet estable — útil para cosas como enviar un formulario o guardar ediciones.

Los service workers son una tecnología fundamental para las aplicaciones web modernas. Son lo que hace que la web se sienta como una plataforma, no solo un visor de documentos.