La interfaz de línea de comandos de Workbox (que se incluye en el paquete workbox-cli) consta de un programa de Node.js llamado Workbox y que se puede ejecutar desde un entorno de línea de comandos compatible con Windows o macOS. De forma interna, workbox-cli une el módulo de compilación de la caja de trabajo y proporciona una manera sencilla de integrarlo en un proceso de compilación de línea de comandos, con configuraciones flexibles.
Instala la CLI
Para instalar la CLI con Node, ejecuta el siguiente comando en tu terminal:
npm install workbox-cli --global
Modos de CLI
La CLI tiene cuatro modos diferentes:
wizard: Una guía paso a paso para configurar Workbox para tu proyectogenerateSW: Genera un service worker completo para ti.injectManifest: Inserta los recursos que se almacenan previamente en caché en tu proyecto.copyLibraries: Copia las bibliotecas de Workbox en un directorio.
wizard
El asistente de Workbox hace una serie de preguntas sobre la configuración del directorio local y los archivos que quieres almacenar en caché previamente. Tus respuestas se usan para generar un archivo de configuración que luego se puede usar cuando se ejecuta en modo generateSW.
La mayoría de los desarrolladores solo necesitarán ejecutar el asistente de caja de trabajo una vez, y puedes personalizar de forma manual el archivo de configuración inicial que se genera mediante cualquiera de las opciones de configuración de compilación compatibles.
Para iniciar el asistente, ejecuta lo siguiente:
npx workbox-cli wizard
generateSW
Puedes usar la CLI de Workbox para generar un service worker completo mediante un archivo de configuración (como el archivo que genera el asistente).
Solo ejecuta el siguiente comando:
npx workbox-cli generateSW path/to/config.js
Se recomienda que los desarrolladores que estén conformes con las capacidades integradas de almacenamiento previo en caché y en el entorno de ejecución de Workbox y que no necesiten personalizar el comportamiento de su service worker usen el modo generateSW.
Cuándo usar generateSW
- Deseas almacenar archivos en caché previamente.
- Tienes necesidades de almacenamiento en caché de entorno de ejecución simples.
Cuándo NO usar generateSW
- Deseas usar otras funciones de Service Worker (es decir, Web Push).
- Quieres importar secuencias de comandos adicionales o agregar lógica adicional para estrategias personalizadas de almacenamiento en caché.
injectManifest
Para los desarrolladores que deseen un mayor control de su archivo de service worker final, pueden usar el modo injectManifest. En este modo, se supone que tienes un
archivo de service worker existente (cuya ubicación se especifica en config.js).
Cuando se ejecuta workbox injectManifest, busca una string específica (precacheAndRoute(self.__WB_MANIFEST) de forma predeterminada) en el archivo de service worker de origen. Reemplaza el array vacío con una lista de URLs que se almacenan previamente en caché 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 de tu 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
- Quieres tener más control sobre tu service worker.
- Deseas almacenar archivos en caché previamente.
- Debes personalizar el enrutamiento y las estrategias.
- Quieres usar tu service worker con otras funciones de la plataforma (por ejemplo, Web Push).
Cuándo NO 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 usar los archivos de la biblioteca de Workbox alojados en tu propio origen en lugar de usar la CDN.
Solo necesitas 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 necesita integrarse con mi proceso de compilación?
El proyecto de Workbox contiene varias bibliotecas que trabajan en conjunto para potenciar el service worker de tu app web. Para usar esas bibliotecas de manera eficaz, Workbox debe estar integrada en el proceso de compilación de tu app web. Esto garantiza que el service worker pueda almacenar previamente en caché todo el contenido esencial de tu app web de manera eficiente y mantenerlo actualizado.
¿workbox-cli es la opción correcta para mi proceso de creació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 tu herramienta de compilación, la mejor opción es workbox-webback-plugin.
Si actualmente usas Gulp, Grunt o alguna otra herramienta de compilación basada en Node.js, una mejor opción es integrar workbox-build en tu secuencia de comandos de compilación.
Si no tienes un proceso de compilación en absoluto, deberías crear uno antes de usar Workbox para almacenar previamente en caché cualquiera de tus elementos. Si intentas recordar ejecutar workbox-cli de forma manual, es posible que se produzcan errores, y si olvidas hacerlo, se puede entregar contenido inactivo a los visitantes recurrentes.
Configuración
Después de instalar workbox-cli como una dependencia de desarrollo para tu proyecto local, puedes agregar la llamada a workbox al final de la secuencia de comandos de npm del 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 tu caso de uso) y <path/to/config.js> por la ruta de acceso a tus opciones de configuración. Es posible que workbox wizard haya creado tu configuración automáticamente o que se haya modificado 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.