El almacenamiento previo en caché es una de las tareas más comunes que debes realizar en un service worker, y Workbox ofrece mucha flexibilidad para realizar esta importante tarea, independientemente de cuál de las herramientas de compilación de Workbox elijas. En esta guía, aprenderás a almacenar elementos en caché previamente con generateSW y injectManifest. 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 elementos en caché por adelantado en Workbox. Lo importante que debes recordar sobre generateSW es que no escribes tu propio service worker, sino que le estás pidiendo 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 acciones diferentes 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 webpack incluya 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 los recursos HTML, CSS y JavaScript leídos del sistema de archivos local se almacenarán previamente en caché 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, así que consulta la documentación.

Almacenamiento previo en caché con injectManifest

Usar injectManifest no es tan fácil como utilizar generateSW, pero sacrificas la facilidad de uso por una mayor flexibilidad. Mientras que generateSW controla toda la generación de service worker por ti, injectManifest toma un service worker que escribes como su fuente e inserta una lista de URLs en el almacenamiento en caché previo, mientras deja el resto del service worker tal como está.

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

La lista de entradas en el manifiesto de almacenamiento previo en caché se puede modificar con opciones de configuración adicionales.

Comparación en paralelo

Haz clic en cada una de las pestañas a continuación 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 en el que se usa 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

Dado que 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 almacenamiento previo en caché, ese service worker de entrada podría verse de la siguiente manera:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Anota la cadena self.__WB_MANIFEST. Este es un marcador de posición que Workbox reemplaza con el manifiesto de almacenamiento previo en caché. 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'
  ]
});

injectManifest es preferible si tienes requisitos complejos, como enrutamiento avanzado, estrategias de almacenamiento en caché personalizadas o cualquier otro elemento que no se abarque en 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 podrías hacer en un service worker. A medida que continúes, aprenderás otras técnicas, como el almacenamiento en caché en el entorno de ejecución.