workbox-cli

La interfaz de línea de comandos de Workbox (que se incluye en workbox-cli) consta de un programa de Node.js llamado caja de trabajo que se puede ejecutar desde una línea de comandos compatible con Windows, macOS y UNIX en un entorno de nube. En detalle, workbox-cli envuelve el módulo de compilación de la caja de trabajo y proporciona una manera fácil de integrar Workbox en una compilación de línea de comandos con parámetros de configuración flexibles.

Instala la CLI

Para instalar la CLI con Node, ejecuta el siguiente comando en la terminal:

npm install workbox-cli --global

Modos de la CLI

La CLI tiene cuatro modos diferentes:

  • wizard: Una guía paso a paso para configurar Workbox en tu proyecto.
  • generateSW: Genera un service worker completo para ti.
  • injectManifest: Inserta los recursos para que se almacene en caché previamente en tu proyecto.
  • copyLibraries: Copia las bibliotecas de Workbox en un directorio.

wizard

El asistente de Workbox hace una serie de preguntas sobre el directorio local y qué archivos quieres que se almacenen previamente en caché. Tus respuestas están acostumbradas a generar un archivo de configuración que luego puede usarse cuando se ejecuta en generateSW.

La mayoría de los desarrolladores solo necesita ejecutar el asistente de caja de trabajo una vez, y eres libre. para personalizar manualmente el archivo de configuración inicial que se genera usando cualquiera de las opciones de configuración de compilación compatibles.

Para iniciar el asistente, ejecuta lo siguiente:

npx workbox-cli wizard

Captura de pantalla del asistente de la CLI de Workbox

generateSW

Puedes usar la CLI de Workbox para generar un service worker completo mediante un archivo de configuración (como el que generó el asistente)

Solo ejecuta el siguiente comando:

npx workbox-cli generateSW path/to/config.js

Desarrolladores que están satisfechos con el almacenamiento previo en caché y el almacenamiento en caché del entorno de ejecución integrados de Workbox y no necesitan personalizar el comportamiento de sus service workers se recomienda usar el modo generateSW.

Cuándo usar generateSW

  • Quieres almacenar en caché previamente los archivos.
  • Tienes necesidades simples de almacenamiento en caché del entorno de ejecución.

Cuándo NO debes usar generateSW

  • Quieres usar otras funciones de Service Worker (es decir, Web Push).
  • Quieres importar secuencias de comandos adicionales o agregar lógica adicional para estrategias de almacenamiento en caché personalizadas.

injectManifest

Para desarrolladores que quieren tener más control sobre su archivo de service worker final puedes usar el modo injectManifest. En este modo, se supone que tienes archivo de service worker existente (cuya ubicación se especifica en config.js).

Cuando se ejecuta workbox injectManifest, busca una cadena específica. (precacheAndRoute(self.__WB_MANIFEST) de forma predeterminada) en la fuente archivo de service worker. Reemplaza el array vacío por una lista de URL para almacenar en caché con anticipación y escribe el archivo del service worker en su ubicación de destino, según las opciones de configuración en config.js. El resto del código del service worker de origen no se modifica.

Puedes usar Workbox en este modo de la siguiente manera:

npx workbox-cli injectManifest path/to/config.js

Cuándo usar injectManifest

  • Si necesitas más control sobre tu service worker.
  • Quieres almacenar en caché previamente los archivos.
  • Debes personalizar el enrutamiento y las estrategias.
  • Quieres usar el service worker con otras funciones de la plataforma (p.ej., Web Push).

Cuándo NO debes usar injectManifest

  • Quieres la ruta más fácil para agregar un service worker a tu sitio.

copyLibraries

Este modo es útil si quieres usar injectManifest y quieres te gustaría usar los archivos de la biblioteca de Workbox alojados en tu propio origen en su lugar del uso de la CDN.

Solo tienes que ejecutarlo con una ruta de acceso para escribir los archivos:

npx workbox-cli copyLibraries third_party/workbox/

Integración del proceso de compilación

¿Por qué Workbox debe integrarse en mi proceso de compilación?

El proyecto Workbox contiene varias bibliotecas que funcionan en conjunto para para potenciar tus apps web service worker. Para las bibliotecas de forma eficaz, Workbox debe estar integrado en tu de compilación de una aplicación web. Esto garantiza que tu service worker pueda almacenar en caché previamente en caché todo el contenido crítico de tu aplicación web y mantenerlo contenido actualizado.

¿Es workbox-cli la opción correcta para mi proceso de compilación?

Si tienes un proceso de compilación existente que se basa completamente en secuencias de comandos de npm, entonces, workbox-cli es una buena opción.

Si actualmente usas webpack como compilación y, luego, usa workbox-webback-plugin es una mejor opción.

Si actualmente usas Gulp, Grunt o alguna otra herramienta de compilación basada en Node.js Luego, integra workbox-build en tu secuencia de comandos de compilación. es una mejor opción.

Si no cuentas con ningún proceso de compilación, deberías idear uno. antes de usar Workbox para almacenar en caché con anticipación cualquiera de sus recursos. Probando recordar ejecutar workbox-cli manualmente puede ser propenso a errores y olvidar para ejecutarla, es posible que se publique contenido inactivo a los visitantes recurrentes.

Configuración

Después de instalar workbox-cli como desarrollo para tu proyecto local, puedes agregar la llamada a workbox en final de la secuencia de comandos de npm de tu proceso de compilación existente:

Desde package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

Reemplaza <mode> por generateSW o injectManifest (según en tu caso de uso) y <path/to/config.js> con la ruta de acceso a tus opciones de configuración. Es posible que se haya creado tu configuración automáticamente mediante workbox wizard o se ajusta de forma manual.

Configuración

Opciones que usa generateSW

Puedes encontrar un conjunto completo de opciones de configuración en la documentación de referencia.

Opciones que usa injectManifest

Puedes encontrar un conjunto completo de opciones de configuración en la documentación de referencia.