Caja de trabajo: tu kit de herramientas para service worker de alto nivel

Jeff Posnick

Dos APIs tienen un rol fundamental en la compilación de apps web confiables: Service Worker y Cache Storage. Sin embargo, usarlos 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 de tu trabajador de servicio pueden causar problemas de almacenamiento en caché. Es posible que a los usuarios se les muestre contenido desactualizado o vínculos rotos.

Workbox es un kit de herramientas de trabajador de servicio de alto nivel compilado sobre las APIs de Service Worker y Cache Storage. Proporciona un conjunto de bibliotecas listas para producción para 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 trabajador de servicio 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 de tu trabajador de servicio y controla cómo intercepta las solicitudes salientes y cómo interactúa con la API de Cache Storage. Workbox tiene 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 trabajador de servicio responderá (conocido como enrutamiento) y cómo lo hará (conocido como la estrategia de almacenamiento en caché).

Integración de compilació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 objetivos:

  • Crea una secuencia de comandos de trabajador de servicio basada en un conjunto de opciones de configuración. El trabajador del servicio generado usa las bibliotecas del entorno de ejecución de Workbox "debajo del capó" para poner en acción las estrategias de almacenamiento en caché que configures.
  • Genera una lista de URLs que se deben "almacenar en caché previamente", según 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. Hay varias guías que explican las estrategias de almacenamiento en caché comunes desde la perspectiva de un service worker "estándar". 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 en caché previo 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 subyacente de Cache Storage es potente, pero no tiene ninguna compatibilidad integrada para el vencimiento de la caché. Herramientas como Workbox cubren esa brecha.

Registros y generación de informes de errores extensos

Cuando comienzas a usar los trabajadores del servicio, es un desafío descubrir por qué se almacena en caché algo (o, igualmente frustrante, por qué no se almacena en caché). 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 de tu navegador.

Registro de Workbox en la consola de DevTools

Si sigues los mensajes de registro, puedes llegar al origen de cualquier problema de configuración o invalidación mucho más rápido que si lo hicieras solo.

Una base de código probada y multinavegador

Workbox se desarrolla en un paquete de pruebas multinavegador y, cuando es posible, recurre automáticamente a implementaciones alternativas de funciones que no están disponibles en ciertos navegadores.

¿Cómo deberías usar Workbox?

Integración de frameworks

Si estás comenzando un proyecto nuevo desde cero, puedes aprovechar la integración de Workbox que se encuentra en muchos kits de partida 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 todo lo que necesites para comenzar a usar Workbox sea agregar la línea de comandos, el módulo de Node.js o el complemento de Webpack adecuados.

En particular, la interfaz de línea de comandos de Workbox facilita el inicio y el funcionamiento, 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 más información. Puedes personalizar aún más tu service worker si realizas cambios en workbox-config.js. Consulta la documentación de las opciones para obtener más información.

Usa Workbox en el tiempo de ejecución en un trabajador de servicio existente

Si tienes un trabajador del servicio existente y deseas probar las bibliotecas del 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 en caché previo (que requiere integración en el tiempo de compilación), pero es excelente 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',
  })
);