Cómo gestionar las estrategias offline en las Progressive Web Apps
El nombre de Progressive Web Apps (PWA) nos da una pista sobre qué son realmente este tipo de aplicaciones, sobre las cuales ya veníamos hablando en anteriores posts, que vienen a a integrar lo mejor de una página web y una aplicación móvil nativa, adaptándose por completo al dispositivo del que se ejecutan y ofreciendo una experiencia móvil lo más similar a una web. En este post, queremos presentar las estrategias de las Web APP offline, que representan una de las principales ventajas que ofrecen las PWA y explicaremos cómo se pueden implementar. Como decíamos, una de las características más interesantes de las PWA es la posibilidad de trabajar offline. Es un aspecto muy importante, ya que al instalarse las aplicaciones en la lanzadera de iconos del dispositivo, es necesario que estén siempre disponibles y esto tiene que darse incluso, si en un determinado momento, el dispositivo no se encuentra conectado a Internet o si esa conexión es muy lenta o inestable.
Para implementar estas características para el trabajo offline, entran en juego los conocidos «Service Workers», que ya sabemos que son de código JavaScript, se pueden instalar en el navegador y que tienen la posibilidad de seguir ejecutándose aunque el usuario no tenga la web abierta en un momento dado. Una de las posibilidades que ofrece el Service Worker es el cacheo de datos, que es fundamental para que la PWA se pueda consultar offline. Gracias al cacheo de páginas y datos, realizado por el Service Worker, cuando no se dispone de conexión a Internet, se pueden entregar los datos cacheados. ¡Ahí está la magia!
Además, el sistema es muy flexible, dando lugar a distintas estrategias de cacheo que vamos a describir a continuación.
Estrategias de cacheo
Las estrategias offline o estrategias de cacheo sirven para configurar cómo se debe usar la caché y bajo qué circunstancias se deben usar los archivos cacheados, o bien los archivos disponibles online. Sus nombres ya son bastante descriptivos de por sí, pero vamos a resumir el funcionamiento con algunas explicaciones en el listado a continuación:
- CacheFirst. Esta estrategia indica que en el caso de que existan archivos en la caché, se usarán de manera prioritaria, frente a los archivos que se puedan encontrar online. De esta manera estamos limitando el uso de ancho de banda, evitando la transferencia de datos en los casos que éstos se encuentren cacheados.
- CacheOnly. Esta estrategia depende directamente de la caché. Si hay archivos en caché, se entregarán. Si no los hay, las solicitudes fallarán.
- NetworkFirst. Esta es la estrategia que, en principio, se utiliza más a menudo en las aplicaciones. En ella, primero se intentan acceder a los datos ubicados en red (en el servidor de la aplicación) y, en caso que no se pueda acceder a ellos (por ejemplo si estamos offline), se entreguen los datos cacheados.
- NetworkOnly. En este caso no participa la caché para nada. Simplemente se obtienen los datos del servidor remoto. Si no hay conexión a Internet no se podrán servir los archivos.
Implementación de las estrategias de cacheo
Para la implementación de estas estrategias de cacheo, como se ha señalado anteriormente, se usa un código en los Service Workers. Sin embargo, aunque este código se puede programar de manera manual, lo normal es que los desarrolladores se apoyen en librerías que permitan realizar las acciones de una manera más rápida, generalmente por medio de una configuración más sencilla.
La librería más recomendable en este momento para realizar estas tareas se llama Workbox y está desarrollada por Google, que también es el gran impulsor de las PWA en general. La librería Workbox sirve, en líneas generales, para eliminar el trabajo de base para la implementación de Service Workers y nos sirve para realizar diversas funciones, entre las que se encuentra el cacheo, pero también la sincronización, el routing o el precacheo de recursos.
Puedes encontrar más información en la web de Workbox: https://developers.google.com/web/tools/workbox/
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.