Dos APIs desempeñan un papel crucial en la creación de aplicaciones web confiables: Service Worker y Almacenamiento en caché. Sin embargo, utilicándolos eficazmente, sin introducir errores sutiles ni puede ser un desafío. Por ejemplo, los errores en el código de tu service worker causar problemas de almacenamiento en caché; es posible que a los usuarios se les muestre contenido desactualizado enlaces.
Workbox es una herramienta de kit de herramientas del service worker creado sobre el Service Worker y el almacenamiento en caché APIs Proporciona un conjunto de bibliotecas listas para la producción que permiten agregar soporte sin conexión a aplicaciones web. El kit de herramientas se estructura en dos colecciones: herramientas que ayudan a administrar el código que se ejecuta en el service worker y las herramientas que se integran con de compilación.
Código del entorno de ejecución
Es el código que se ejecuta en la secuencia de comandos del service worker y controla intercepta las solicitudes salientes y, además, interactúa con la API de Cache Storage. La caja de trabajo tiene un unos doce módulos de biblioteca en total, que manejan una variedad de casos de uso especializados. Los módulos más importantes determinar 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é).
Integración de compilación
Ofertas de Workbox línea de comandos módulo de Node.js, y complemento webpack que ofrecen formas alternativas de lograr dos cosas:
- Crear una secuencia de comandos de service worker basada en un conjunto de parámetros de configuración opciones de estado. El service worker generado usa las bibliotecas del entorno de ejecución de Workbox “detrás de escena” para poner en práctica las estrategias de almacenamiento en caché que configures.
- Genera una lista de URLs que deberían “almacenado en caché previamente”, 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 de guías que explican estrategias comunes de almacenamiento en caché de la vainilla desde la perspectiva del service worker. Si decides usar Workbox, estos son algunos de sus beneficios.
Administración de caché
Workbox se encarga de las actualizaciones de caché, ya sea vinculada a tu proceso de compilación al con almacenamiento previo en caché o a través de políticas configurables de tamaño/edad cuando se usa el entorno de ejecución el almacenamiento en caché. La API de Cache Storage subyacente es potente, pero no tiene compatibilidad integrada con el vencimiento de la caché. Herramientas como Workbox cubren esa brecha.
Informes de errores y registros extensos
Cuando comienzas a usar service workers, averiguar por qué algo
se almacena en caché (o, lo que es aún frustrante, el motivo por el que no se almacena en caché) es un desafío.
Workbox detecta automáticamente si estás ejecutando una versión de desarrollo de tu
sitio web en localhost y activa el registro de depuración en el JavaScript de tu navegador
de Cloud.
Al seguir los mensajes de registro, puedes llegar a la raíz de cualquier configuración o invalidación mucho más rápido que si estuvieras a él solo.
Una base de código probada para varios navegadores
Workbox se desarrolla en función de un paquete de pruebas entre navegadores y, cuando es posible, recurre automáticamente a implementaciones alternativas de funciones que son que falta en algunos navegadores.
- El
workbox-broadcast-cache-update moduleusa el API de Broadcast Channel cuando estén disponibles y recurre a un Basado enpostMessage()para su implementación en navegadores sin compatibilidad. - El módulo de Workbox-background-sync usa el API de Background Sync si es posible y, si no, recurre a los eventos en cola service worker se inicia.
¿Cómo deberías usar Workbox?
Integración en el framework
Si estás comenzando un proyecto nuevo desde cero, puedes aprovechar la La integración de la caja de trabajo se encuentra en muchos kits de inicio y complementos de complementos populares:
Agrega Workbox a tu proceso de compilación existente
Si ya implementaste un proceso de compilación para tu sitio, ingresando apropiado línea de comandos módulo de Node.js, o complemento webpack puede ser todo lo que necesitas para comenzar a usar Workbox.
En particular, la interfaz de línea de comandos de Workbox
facilita la puesta en marcha
en ejecución, con un modo wizard que verificará tu desarrollo local
y te sugerirá una configuración predeterminada razonable que podrías usar
de ahora en adelante:
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 información detallada.
Usa Workbox en el entorno de ejecución en un service worker existente
Si ya tienes un service worker y quieres probar el entorno de ejecución de Workbox bibliotecas, importa Workbox desde su CDN oficial. y empieza a usarla para el almacenamiento en caché del tiempo de ejecución. Este uso significa 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 las pruebas 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',
})
);