Las formas de Workbox

Workbox es lo suficientemente flexible como para adaptarse a casi cualquier proceso de compilación de cualquier proyecto. Esto significa que hay más de una forma de usar Workbox y te permite elegir la integración correcta para tu proyecto. Independientemente de cómo realices la integración con Workbox, las diversas herramientas ofrecen una API similar.

generateSW en comparación con injectManifest

Deberás usar uno de los dos métodos principales de las herramientas de compilación de Workbox: generateSW o injectManifest. La opción que debas usar dependerá de cuánta flexibilidad necesites. generateSW prioriza la facilidad de uso y la simplicidad a costa de la flexibilidad, lo que te permite declarar un conjunto de opciones de configuración y, a cambio, te proporciona un service worker completamente funcional.

injectManifest favorece una mayor flexibilidad a costa de cierta simplicidad, ya que terminarás escribiendo el código para tu service worker por tu cuenta, y injectManifest proporciona un manifiesto de almacenamiento previo en caché que se puede usar con los métodos de almacenamiento previo en caché de Workbox.

Cuándo usar generateSW

Debes usar generateSW en los siguientes casos:

  • Te recomendamos almacenar previamente en caché los archivos asociados con tu proceso de compilación, incluidos los archivos cuyas URLs contienen hashes que tal vez no conozcas de antemano.
  • Tienes necesidades simples de almacenamiento en caché del entorno de ejecución que se pueden configurar mediante las opciones de generateSW.

Cuándo no usar generateSW

Por otro lado, no debes usar generateSW en los siguientes casos:

  • Deseas usar otras funciones de service worker (como Web Push)
  • Necesitas flexibilidad adicional para importar secuencias de comandos adicionales o usar módulos de Workbox específicos para ajustar tu service worker a las necesidades de tu aplicación.

Cuándo usar injectManifest

Debes usar injectManifest en los siguientes casos:

  • Deseas almacenar archivos en caché previamente, pero quieres escribir tu propio service worker.
  • Tienes necesidades complejas de almacenamiento en caché o enrutamiento que no se pueden expresar a través de las opciones de configuración de generateSW.
  • Te gustaría usar otras APIs en tu service worker (como Web Push).

injectManifest difiere de generateSW en que requiere que especifiques un archivo de service worker de origen. En este flujo de trabajo, el archivo de service worker de origen debe tener una cadena self.__WB_MANIFEST especial para que injectManifest pueda reemplazarlo por el manifiesto de precaché.

Cuándo no usar injectManifest

No debes usar injectManifest en los siguientes casos:

  • No quieres usar almacenamiento en caché previo en tu service worker.
  • Los requisitos de nuestro service worker son lo suficientemente simples como para que se puedan cubrir con lo que generateSW y sus opciones de configuración pueden proporcionar
  • Debes priorizar la facilidad de uso sobre la flexibilidad.

Cómo usar las herramientas de compilación de Workbox

Si buscas una manera independiente del framework de usar Workbox en tu proceso de compilación, tienes tres opciones:

  1. workbox-cli
  2. La herramienta de línea de comandos de workbox-build
  3. Mediante un agrupador (como workbox-webpack-plugin).

Cada una de estas herramientas de compilación ofrece los modos generateSW y injectManifest, con un conjunto similar de opciones. Todas estas son buenas opciones cuando no deseas vincular tu service worker con la tecnología de Workbox a un framework en particular. Para saber cuál de estas opciones es la más adecuada, revisemos rápidamente cada una.

workbox-cli

Si buscas la menor barrera de entrada posible con Workbox, la CLI es para ti:

npm install workbox-cli --save-dev

Para comenzar a usar la CLI, ejecuta el asistente con npx workbox wizard. El asistente te hará algunas preguntas, y las respuestas a esas preguntas se usarán para configurar un proyecto con un archivo workbox-config.js que puedes personalizar para satisfacer tus necesidades. Tendrá un aspecto similar a este:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Una vez que se crea el archivo de configuración, la CLI puede ejecutar los métodos generateSW o injectManifest por ti. El texto de ayuda de la CLI tiene más información y ejemplos de uso.

workbox-build

workbox-cli es un wrapper del módulo workbox-build, y una alternativa es usar workbox-build directamente. Cuando uses workbox-build, en lugar de especificar opciones con un archivo workbox-config.js, deberás usar los métodos generateSW o injectManifest directamente como parte de una secuencia de comandos de Node y pasar un conjunto similar de opciones:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

En el ejemplo anterior, workbox-build escribirá el service worker generado en el directorio dist cuando se ejecute el comando node build-sw.mjs.

Usa un agrupador

Varios agrupadores tienen sus propios complementos de Workbox, pero el único agrupador que admite oficialmente el equipo de Workbox es Webpack a través de workbox-webpack-plugin. Al igual que workbox-cli y workbox-build, workbox-webpack-plugin ejecutará los métodos generateSW o injectManifest, excepto que el complemento usa mayúscula en esos nombres de métodos como GenerateSW o InjectManifest. De lo contrario, el uso es similar a workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

Las opciones que pasas a GenerateSW o InjectManifest no son las mismas que las de generateSW o injectManifest, pero hay una superposición significativa. En particular, no es necesario especificar una opción globDirectory para GenerateSW (ni puedes hacerlo), dado que webpack ya sabe dónde se agrupan tus recursos de producción.

Usa un marco de trabajo

Todo lo que abordamos en este punto se enfoca en el uso de Workbox, independientemente de las preferencias del framework. Sin embargo, es posible usar Workbox dentro de un framework específico si eso facilita el desarrollo. Por ejemplo, create-react-app se envía con Workbox de forma predeterminada. Las diferentes integraciones de frameworks con Workbox se tratarán más adelante en un artículo posterior.

Ten en cuenta que estas integraciones específicas del framework pueden restringir tu capacidad para configurarlo de la manera que deseas. En casos como estos, siempre puedes recurrir a los métodos que se analizan aquí.

¿Qué sucede si no tengo un proceso de construcción?

En este documento, se asume que tu proyecto tiene un proceso de compilación. Sin embargo, es posible que tu proyecto no. Si eso describe tu situación, también puedes usar Workbox con el módulo workbox-sw. Con workbox-sw, puedes cargar el entorno de ejecución de Workbox desde una CDN o de forma local, y redactar tu propio service worker.

Conclusión

La flexibilidad de Workbox garantiza que puedas usarla en casi cualquier proyecto, independientemente de las preferencias del framework o la cadena de herramientas. Todas estas alternativas te permitirán realizar el almacenamiento previo en caché y el almacenamiento en caché del entorno de ejecución a través de un par de métodos, a la vez que brindan una mayor flexibilidad para compilar service workers con funciones más avanzadas cuando sea necesario.