Workbox: Tu kit de herramientas de service worker de alto nivel

Jeff Posnick

Dos APIs desempeñan un papel fundamental en la compilación de apps web confiables: Service Worker y Almacenamiento en caché. Sin embargo, usarlas de manera eficaz, sin introducir errores sutiles ni encontrarse con casos extremos, puede ser un desafío. Por ejemplo, los errores en el código del service worker pueden causar problemas de almacenamiento en caché; es posible que se muestre contenido desactualizado o vínculos rotos a los usuarios.

Workbox es un kit de herramientas de service worker de alto nivel que se basa en las APIs de Service Worker y Cache Storage. Proporciona un conjunto de bibliotecas listas para producción que permiten agregar compatibilidad sin conexión a las apps web. El kit de herramientas se estructura en dos colecciones: herramientas que ayudan a administrar el código que se ejecuta dentro de tu service worker y herramientas que se integran en tu proceso de compilación.

Código del entorno de ejecución

Este es el código que se ejecuta dentro de la secuencia de comandos del service worker y controla cómo intercepta las solicitudes salientes y cómo interactúa con la API de Cache Storage. Workbox tiene alrededor de una docena de módulos de biblioteca en total, cada uno de los cuales controla una variedad de casos de uso especializados. Los módulos más importantes determinan si el service worker responderá (lo que se conoce como enrutamiento) y cómo responderá (lo que se conoce como estrategia de almacenamiento en caché).

Compila la integración

Workbox ofrece herramientas de línea de comandos, módulo de Node.js y complemento de webpack que proporcionan formas alternativas de lograr dos cosas:

  • Crea una secuencia de comandos de service worker basada en un conjunto de opciones de configuración. El service worker generado usa las bibliotecas de entorno de ejecución de Workbox "en segundo plano" para poner en práctica las estrategias de almacenamiento en caché que configures.
  • Generar una lista de URLs que se deben "almacenar en caché previa" en función de patrones configurables para incluir y excluir archivos generados durante el proceso de compilación

¿Por qué deberías usar Workbox?

El uso de Workbox cuando compilas tu service worker es opcional. Existen varias guías que explican las estrategias de almacenamiento en caché comunes desde la perspectiva de un service worker "básico". Si decides usar Workbox, estos son algunos de sus beneficios.

Administración de caché

Workbox controla las actualizaciones de la caché por ti, ya sea vinculadas a tu proceso de compilación cuando usas el almacenamiento previo en caché o a través de políticas de tamaño o antigüedad configurables cuando usas el almacenamiento en caché del entorno de ejecución. La API de Cache Storage subyacente es potente, pero no tiene compatibilidad integrada con el vencimiento de la caché. Herramientas como Workbox llenan ese vacío.

Registro y generación de informes de errores exhaustivos

Cuando comienzas a usar service workers, descubrir por qué se almacena en caché algo (o, lo que es igual de frustrante, por qué no se almacena en caché) es un desafío. Workbox detecta automáticamente cuando ejecutas una versión de desarrollo de tu sitio web en localhost y activa el registro de depuración en la consola de JavaScript del navegador.

Registro de Workbox en la consola de Herramientas para desarrolladores

Si sigues los mensajes de registro, puedes llegar a la raíz de cualquier problema de configuración o invalidación mucho más rápido que si lo hicieras por tu cuenta.

Una base de código probada y compatible con varios navegadores

Workbox se desarrolla con un paquete de pruebas para varios navegadores y, cuando es posible, recurre automáticamente a implementaciones alternativas de funciones que faltan en ciertos navegadores.

¿Cómo deberías usar Workbox?

Integración de frameworks

Si comienzas un proyecto nuevo desde cero, puedes aprovechar la integración de Workbox que se encuentra en muchos kits de inicio y complementos populares:

Agrega Workbox a tu proceso de compilación existente

Si ya tienes un proceso de compilación para tu sitio, es posible que solo necesites colocar la herramienta de línea de comandos, el módulo de Node.js o el complemento de webpack adecuados para comenzar a usar Workbox.

En particular, la interfaz de línea de comandos de Workbox facilita la puesta en marcha, ya que cuenta con un modo wizard que verificará tu entorno de desarrollo local y sugerirá una configuración predeterminada razonable que podrías usar en el futuro:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Para compilar tu service worker, ejecuta workbox generateSW workbox-config.js como parte de un proceso de compilación. Consulta la documentación de generateSW para obtener información detallada. Puedes personalizar aún más tu service worker realizando cambios en workbox-config.js. Consulta la documentación de las opciones para obtener más detalles.

Usa Workbox en el entorno de ejecución en un service worker existente

Si tienes un service worker existente y quieres probar las bibliotecas de entorno de ejecución de Workbox, importa Workbox desde su CDN oficial y comienza a usarlo para el almacenamiento en caché del entorno de ejecución de inmediato. Este caso de uso significa que no podrás aprovechar el almacenamiento previo en caché (que requiere integración en el tiempo de compilación), pero es ideal para crear prototipos y probar diferentes estrategias de almacenamiento en caché sobre la marcha.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);