El almacenamiento previo en caché es una de las tareas más comunes que realizarás en un service worker, y Workbox ofrece mucha flexibilidad para realizar esta importante tarea, independientemente de la herramienta de compilación de Workbox que elijas. En esta guía, aprenderás a almacenar recursos en caché previamente con generateSW y injectManifest, y también conocerás cuál de estos métodos podría ser el más adecuado para tu proyecto.

Almacenamiento previo en caché con generateSW

generateSW es la forma más fácil de almacenar previamente elementos en caché en Workbox. Lo importante que debes recordar sobre generateSW es que no escribes tu propio service worker, sino que le pides a Workbox que genere uno por ti. Sin embargo, puedes influir en su comportamiento a través de una variedad de opciones de configuración.

generateSW realiza diferentes acciones de forma predeterminada según la herramienta de compilación que uses. Cuando usas workbox-webpack-plugin, no tienes que especificar ninguna opción de configuración. De forma predeterminada, el complemento almacenará en caché todo lo que incluye un paquete web en su gráfico de dependencia y escribirá un service worker llamado service-worker.js en el directorio especificado por output.path.

Por otro lado, si usas workbox-build o workbox-cli, solo se almacenarán previamente en caché los recursos HTML, CSS y JavaScript leídos del sistema de archivos local de forma predeterminada. En cuanto a la configuración, debes especificar swDest y la opción globDirectory en la configuración de generateSW para que funcione el almacenamiento previo en caché. Es probable que también quieras configurar opciones adicionales que afecten el comportamiento de tu service worker, por lo que debes echar un vistazo a la documentación.

Almacenamiento previo en caché con injectManifest

Usar injectManifest no es tan fácil como usar generateSW, pero reemplazas la facilidad de uso por una mayor flexibilidad. generateSW maneja toda la generación del service worker por ti, injectManifest toma un service worker que tú escribes como fuente e inserta una lista de URLs para almacenar en caché previamente, a la vez que deja el resto del service worker tal como está.

Cuando usas injectManifest, eres responsable de conectar la lógica de almacenamiento en caché. Cuando injectManifest examina tu service worker de entrada, busca una variable especial self.__WB_MANIFEST y la reemplaza por el manifiesto de precaché. Si esta variable no está presente, injectManifest arrojará un error.

La lista de entradas del manifiesto de precaché se puede modificar con opciones de configuración adicionales.

Comparación en paralelo

Haz clic en cada una de las siguientes pestañas para comparar el uso de los métodos generateSW y injectManifest:

Dado que generateSW genera un service worker, solo debes especificar una configuración. A continuación, se muestra un ejemplo con workbox-build:

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

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

El service worker se puede compilar en la línea de comandos con Node:

node build-sw.js

Como injectManifest requiere un service worker de origen, un ejemplo mínimamente viable requiere un archivo de service worker de origen. Si todo lo que se necesita es el almacenamiento previo en caché, ese service worker de entrada podría verse así:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Observa la string self.__WB_MANIFEST. Este es un marcador de posición que Workbox reemplaza por el manifiesto de precaché. A continuación, se muestra una configuración válida para este caso de uso:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Se prefiere injectManifest si tienes requisitos complejos, como enrutamiento avanzado, estrategias de almacenamiento en caché personalizadas u otros aspectos que no están cubiertos por las opciones que proporciona generateSW.

Conclusión

El almacenamiento previo en caché en Workbox es mucho más sencillo que si tuvieras que administrar el almacenamiento previo en caché por tu cuenta, especialmente cuando se trata de recursos con control de versiones compilados por agrupadores. Sin embargo, el almacenamiento previo en caché no es lo único que probablemente harás en un service worker. A medida que avances, aprenderás otras técnicas, como el almacenamiento en caché del entorno de ejecución.