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

Jeff Posnick

Dos APIs desempeñan una función crucial en la compilación de apps web confiables: Service Worker y Cache Storage. Sin embargo, usarlas de manera eficaz, sin generar errores sutiles ni chocar 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é, ya que se puede mostrar a los usuarios contenido desactualizado o vínculos rotos.

Workbox es un kit de herramientas de service worker de alto nivel compilado sobre las APIs de Service Worker y Cache Storage. Proporciona un conjunto de bibliotecas listas para la producción que permiten agregar soporte 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 del service worker y herramientas que se integran en el proceso de compilación.

Código de entorno de ejecución

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

Integración de la compilación

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

  • 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 “de forma interna” para poner en práctica las estrategias de almacenamiento en caché que configuras.
  • Genera una lista de las URLs que se deben “almacenar previamente en caché”, según los 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 el service worker es opcional. Hay una serie de guías disponibles que explican las estrategias comunes de almacenamiento en caché desde una perspectiva general. Si decides usar Workbox, estos son algunos de sus beneficios.

Administración de la caché

Workbox controla las actualizaciones de caché por ti, ya sea que estén vinculadas al proceso de compilación cuando se usa el almacenamiento previo en caché o mediante políticas de tamaño y antigüedad configurables cuando se usa el almacenamiento en caché del entorno de ejecución. La API de Cache Storage subyacente es potente, pero no tiene ninguna compatibilidad integrada con el vencimiento de la caché. Las herramientas como Workbox llenan esa brecha.

Informes de errores y registros amplios

Cuando comienzas a usar los service workers, descubrir por qué algo se está almacenando en caché (o, igualmente frustrante, por qué no se almacena en caché) es un desafío. Workbox detecta automáticamente si 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 del cuadro de trabajo 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 solo.

Una base de código probada entre navegadores

Workbox se desarrolla con un paquete de pruebas en 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 del framework

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

Agrega Workbox a tu proceso de compilación existente

Si ya tienes un proceso de compilación para tu sitio, usar la herramienta de línea de comandos, módulo Node.js o complemento de webpack correspondientes puede ser todo lo que necesites para comenzar a usar Workbox.

En particular, la interfaz de línea de comandos de Workbox facilita la puesta en marcha, ya que incluye un modo wizard que verificará el 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 detalles. 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 detalles.

Usar Workbox en el tiempo de ejecución en un service worker existente

Si tienes un service worker existente y quieres 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 implica que no podrás aprovechar el almacenamiento previo en caché (que requiere integración en el tiempo de compilación), pero es excelente para el prototipado y para 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',
  })
);