Workbox, qué es y cómo empezar

Workbox es un conjunto de librerías y módulos Node que nos permiten de una forma más fácil y más “humana” trabajar con buenas estrategias de caché.

Qué es la caché de un Navegador

Podríamos denominar a la caché como un sistema de alojamiento de datos local que el propio navegador nos proporciona. Este sistema de alojamiento tiene su propia API compuesta por clases, métodos y demás funcionalidades que nos permiten trabajar con la caché en cada navegador.

En el siguiente enlace (MDN Cache) podéis ver algo más de información sobre esta API y veréis que puede ser algo compleja para la compresión, en este caso Workbox nos ayuda ya que hace de capa de abstracción o wrapper de dicha API.

Beneficios de trabajar con una estrategia de Caché y Workbox

Uno de los principales beneficios de hacer que nuestra Progressive Web Application trabaje con el sistema de caché es la de conseguir una mejor Experiencia de Usuario y que con el almacenamiento de datos en el propio navegador el tiempo de respuesta de nuestra aplicación se reduzca de forma muy considerable.

Pensad que la caché puede funcionar como una capa intermedia de almacenamiento entre la parte frontend de la PWA y backend del servidor desde donde normalmente obtenemos datos y recursos, haciendo que, por ejemplo, archivos estáticos .js, .css, imágenes, fuentes y demás recursos que no cambian de forma asiduidad puedan ser obtenidos directamente de la caché y no tengamos que pedirlas de forma constante y reiterativa a nuestro servidor web.

Cómo implementar Workbox en nuestra PWA

Hay varias formas de implementación tanto si trabajamos con una librería o frameworks frontend como pueden ser Angular, React o Vue, como si no.

En el caso de que trabajemos con precompiladores como Webpack u otros que ya nos proporcionan las librerías y frameworks que antes he mencionado podremos trabajar con su módulo NPM para NodeJS que pueden encontrar en el siguiente enlace: https://www.npmjs.com/package/workbox-sw

En el caso de que no las utilices en tu proyecto web puedes añadir Workbox directamente desde un CDN haciendo referencia al siguiente archivo que contiene la librería: CDN Workbox JS Library

Aunque crearemos un tutorial en el que mostraremos paso a paso cómo implementar Workbox desde NPM y cómo preparar las primeras estartegias, os dejo por aquí un enlace a la documentación oficial para “ir abriendo boca”: Using Workbox SW via CDN

Qué son y principales estrategias dentro de Workbox

Cuando se introdujeron por primera vez los service workers, surgieron un conjunto de estrategias comunes de almacenamiento en caché. Una estrategia de almacenamiento en caché es un patrón que determina cómo un worker genera una respuesta después de recibir un evento “fetch”.

Las Workbox-Strategies proporciona las estrategias de almacenamiento en caché más comunes, por lo que es fácil aplicarlas en tu proyecto web basándote en un estándar bien diseñado y probado.

Workbox permite definir y diseñar distintas estrategias según sea necesario y, que de este modo, podamos definir si, por ejemplo, para archivos del tipo .png y .jpg debemos aplicar una estrategia “Cache First” y parar los archivos .js y .css “Network First”.

A continuación te describo las estrategias más comunes y con las que podemos resolver una gran mayoría de casos y necesidades.

Cache First (Cache Falling Back to Network)

En un estrategia Cache First es la caché del navegador la que prevalece frente a la obtención de recursos desde el servidor. En este caso de que Workbox encuentre el recurso o recursos que necesita tu PWA en la caché del navegador estos serán los que se mostrarán sin necesidad de realizar una o más consultas al servidor. En caso contrario se realizaran las peticiones necesarias para suministrar la información que necesite a tu PWA.

Este tipo de caché se suele utilizar con recursos que suelan tener pocos cambios en el tiempo o incluso ninguno como, por ejemplo, podrían ser imágenes estáticas.

Network First (Network Falling Back to Cache)

En la estrategia Network First el service worker realizará previamente la llamada al servidor ya que prevalece el obtener la información más actualizada y en el caso de que, por ejemplo, el servidor no retorne respuesta o que simplemente el dispositivo móvil no tenga conexión a internet en esos momentos, será cuando se utilicen los datos de la caché.

Este tipo de caché se utilizan en casos en los que los datos a mostrar puedan tener una alta probabilidad de actualización y variación. Pero para que, en la medida de lo posible, tu PWA no deje simplemente de mostrar contenido o dar servicio es en algunos casos preferible mostrar un mensaje de aviso y mostrar información anterior a no mostrar nada.

Stale-While-Revalidate

La estrategia Stale While Revalidate quizás puede ser una de las que más incertidumbre a simple vista pueda ofrecer además de ser una de las más complejas a la hora de sacarle rendimiento e incluso poder ver de forma clara en qué casos utilizarla.

El flujo de trabajo de esta estrategia corresponde a que primeramente el service worker busca en la caché el o los recursos que la PWA necesita, en el caso de encontrarlos serán estos lo que serán utilizados por tu PWA y tras resolver las necesidades, realizará las peticiones necesarias al servidor para obtener de la forma más actualizada los mismos recursos siendo estos nuevos almacenados de nuevo en caché.

Esto se realiza en casos en el que el performance prevalezca frente a lo actualizado que pueda estar el contenido que se muestre ya que pensad en que la siguiente vez que el usuario pida esta misma información se le mostrará de forma más actualizada ya que habrá sido obtenida en “segundo plano” por el server worker.

Conclusión

Workbox es un conjunto de herramientas JavaScript muy potente y amigable a la hora de trabajar. A mi parecer es una de las características que debería ofrecer una PWA bien pensada y con la idea de ofrecer la mejor experiencia de usuario. De todos modos es muy importante entender bien cómo trabaja y cómo debemos utilizarlo, de lo contrario nos encontraremos con sorpresas inesperadas.