Cómo funciona el offline de una PWA por dentro

Hace tiempo escribí sobre qué es una PWA y por qué merece la pena. Lo que no conté entonces es la pieza que hace posible la parte que más impresiona a un cliente cuando se la enseño: que la app siga abriéndose incluso con el móvil en modo avión. Esa pieza es el service worker, y por dentro funciona de forma bastante distinta a como yo imaginaba antes de meterme a fondo.

No es magia, es un proxy que tú programas

Un service worker es un script que el navegador ejecuta aparte de la página, en su propio hilo, y que puede interceptar cada petición de red que hace tu aplicación antes de que llegue a internet. La primera vez que se registra, no controla nada todavía — hay que recargar la página una vez para que empiece a interceptar peticiones. Ese detalle me costó un buen rato de depuración la primera vez: probaba cambios, no pasaba nada, y el problema no era mi código sino que seguía viendo la versión sin service worker activo.

Las estrategias de caché que de verdad uso

No hay una única forma de decidir qué devolver cuando se intercepta una petición — depende de qué es lo que se está pidiendo:

Para el shell de la aplicación (HTML, CSS, JS de la propia app), uso cache-first: si ya está en caché, se sirve directamente sin ni siquiera intentar la red, y solo se actualiza la caché en segundo plano. Es lo que hace que la app se abra al instante, incluso con buena conexión.

Para datos que cambian a menudo, uso network-first con fallback a caché: intenta la red primero, y si falla (sin conexión), sirve la última versión guardada. Así el usuario ve datos algo desactualizados en vez de una pantalla en blanco, que es casi siempre preferible.

Lo que aprendí a base de errores

Cachear todo sin criterio es tan malo como no cachear nada. La primera versión que hice guardaba en caché absolutamente cada petición, incluidas las de la API con datos que cambiaban cada minuto — el resultado era una app que mostraba información vieja como si fuera actual, sin ningún aviso. Desde entonces decido estrategia por tipo de recurso, nunca “cachéalo todo” como regla general. El offline de verdad útil no es el que esconde que los datos están desactualizados, es el que sigue funcionando y es honesto sobre qué tan reciente es lo que estás viendo.