respuesta-que se puede almacenar en caché de la caja de trabajo

Cuando se almacenan recursos en caché durante el tiempo de ejecución, no existe una regla única que indique si una respuesta determinada es "válida" y es apta para guardarse y volver a usarse.

El módulo workbox-cacheable-response proporciona una forma estándar de determinar si una respuesta debe almacenarse en caché según su código de estado numérico, la presencia de un encabezado con un valor específico o una combinación de ambos.

Almacenamiento en caché basado en códigos de estado

Puedes configurar una estrategia de Workbox a fin de que un conjunto de códigos de estado sea apto para el almacenamiento en caché. Para ello, agrega una instancia CacheableResponsePlugin al parámetro plugins de una estrategia:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Esta configuración le indica a Workbox que, cuando proceses respuestas para las solicitudes en https://third-party.example.com/images/, almacenar en caché cualquier solicitud con un código de estado 0 o 200.

Almacenamiento en caché basado en encabezados

Puedes configurar una estrategia de Workbox a fin de verificar la presencia de valores de encabezado específicos como criterios para agregar a la caché. Para ello, configura el objeto headers cuando construyas el complemento:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Cuando proceses respuestas para URLs de solicitud que contengan /path/to/api/, observa el encabezado llamado X-Is-Cacheable (que el servidor agregaría a la respuesta). Si ese encabezado está presente y se configura en un valor de "true", la respuesta se puede almacenar en caché.

Si se especifican varios encabezados, solo uno debe coincidir con los valores asociados.

Almacenamiento en caché basado en encabezados y códigos de estado

Puedes combinar la configuración de estado y encabezado. Se deben cumplir ambas condiciones para que una respuesta se considere almacenable en caché; en otras palabras, la respuesta debe tener uno de los códigos de estado configurados y debe tener al menos uno de los encabezados proporcionados.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

¿Cuáles son las opciones predeterminadas?

Si usas una de las estrategias integradas de Workbox sin configurar explícitamente un cacheableResponse.CacheableResponsePlugin, se usan los siguientes criterios predeterminados para determinar si una respuesta recibida de la red debe almacenarse en caché:

• staleMientrasRevalidate y networkFirst: Las respuestas con un estado de 0 (es decir, respuestas opacas) o 200 se consideran almacenables en caché.
• cacheFirst: Las respuestas con el estado 200 se consideran almacenables en caché.

De forma predeterminada, los encabezados de respuesta no se usan para determinar la capacidad de almacenamiento en caché.

¿Por qué hay diferentes valores predeterminados?

Los valores predeterminados varían en función de si las respuestas con el estado 0 (es decir, respuestas opacas) terminarán almacenadas en caché. Debido a la naturaleza de “caja negra” de las respuestas opacas, no es posible que el service worker sepa si la respuesta es válida o si refleja una respuesta de error que muestra el servidor de origen cruzado.

En el caso de las estrategias que incluyen algunos medios de actualización de la respuesta almacenada en caché, como stalewhileRevalidate y networkFirst, el riesgo de almacenar en caché una respuesta de error transitoria se ve mitigado por el hecho de que la próxima vez que se actualice la caché, se podrá usar una respuesta correcta y correcta.

En el caso de las estrategias que implican almacenar en caché la primera respuesta recibida y reutilizar esa respuesta de forma indefinida, las repercusiones de un error transitorio que se almacenan en caché y se vuelven a usar son más graves. Para pecar por el lado seguro de forma predeterminada, cacheFirst rechazará el guardado de una respuesta, a menos que tenga un código de estado de 200.

Uso avanzado

Si deseas usar la misma lógica de almacenamiento en caché fuera de una estrategia de Workbox, puedes usar la clase CacheableResponse directamente.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}