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, lo que te permite elegir la integración correcta para tu proyecto. Más allá de cómo realices la integración con Workbox, las diversas herramientas ofrecen una API similar.

generateSW en comparación con injectManifest

Deberás utilizar uno de los dos métodos principales de las herramientas de compilación de Workbox: generateSW o injectManifest. La opción que uses 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 te proporciona un service worker completamente funcional.

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

Cuándo usar generateSW

Debes usar generateSW en los siguientes casos:

  • Quieres almacenar previamente en caché los archivos asociados con tu proceso de compilación, incluidos los archivos cuyas URLs contengan hashes que quizás 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:

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

Cuándo usar injectManifest

Debes usar injectManifest en los siguientes casos:

  • Quieres almacenar en caché previamente los archivos, 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.
  • Quieres usar otras APIs en tu service worker (como Web Push).

injectManifest se diferencia de generateSW en el sentido de 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 almacenamiento previo en caché.

Cuándo no usar injectManifest

No debes usar injectManifest en los siguientes casos:

  • No es conveniente usar almacenamiento previo en caché en tu service worker.
  • nuestros requisitos de service worker son lo suficientemente simples como para cubrir lo que generateSW y sus opciones de configuración pueden proporcionar.
  • Priorizas la facilidad de uso sobre la flexibilidad.

Usa las herramientas de compilación de Workbox

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

  1. workbox-cli
  2. workbox-build de línea de comandos.
  3. Usar 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 quieres vincular tu service worker con tecnología de Workbox a un framework en particular. Para saber cuál de estas opciones es la mejor, analicemos cada una rápidamente.

workbox-cli

Si estás buscando la barrera de entrada más baja 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. Las respuestas se usarán para configurar un proyecto con un archivo workbox-config.js que puedes personalizar según 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 alrededor 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.

Con un agrupador

Varios agrupadores tienen sus propios complementos de Workbox, pero el único agrupador oficialmente compatible con 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 escribe en mayúscula 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 a generateSW o injectManifest, pero se superponen de forma significativa. En particular, no necesitas (ni puedes) especificar una opción globDirectory para GenerateSW, dado que webpack ya sabe dónde se agrupan tus elementos de producción.

Usa un framework

Todo lo que se aborda en este punto se centra en el uso de Workbox independientemente de las preferencias de marco de trabajo de cada uno. Sin embargo, es posible usar Workbox dentro de un framework específico si facilita el desarrollo. Por ejemplo, create-react-app se envía con Workbox de forma predeterminada. Las diferentes integraciones de marcos de trabajo con Workbox se explican más adelante en un artículo posterior.

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

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

En este documento, se supone que tu proyecto tiene un proceso de compilación, pero es posible que tu proyecto no. Si eso describe tu situación, aú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 crear tu propio service worker.

Conclusión

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