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 un La respuesta dada es “válido” y que pueden guardarse y reutilizarse.

El módulo workbox-cacheable-response proporciona una forma estándar de determinar si una respuesta debe almacenarse en caché en función de 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 para que considere que un conjunto de códigos de estado es apto para la caché. Para ello, agrega una instancia de 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 procesa las respuestas solicitudes para https://third-party.example.com/images/, almacena en caché todas las solicitudes con un código de estado de 0 o 200.

Almacenamiento en caché basado en encabezados

Puedes configurar una estrategia de Workbox para verificar la presencia de valores de encabezado específicos como criterios para agregarlos 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 las respuestas de las URLs de solicitud que contienen /path/to/api/, revisa el encabezado llamado X-Is-Cacheable (que el servidor agregaría a la respuesta). Si ese encabezado está presente, y si está se fija en el valor "true", la respuesta se puede almacenar en caché.

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

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

Puedes combinar la configuración del estado y del encabezado. Ambas condiciones se deben cumplir para que una respuesta se considere almacenable en caché; es decir, 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 los valores predeterminados?

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

• stalewhileRevalidate y networkFirst: 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 según si las respuestas con un estado de 0 (es decir, respuestas opacas) terminarán almacenadas en caché. Debido a la "caja negra" la naturaleza 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 mostrada por el servidor de origen cruzado.

En el caso de las estrategias que incluyen algunos medios para actualizar la respuesta almacenada en caché, como staleWhileRevalidate y networkFirst, el riesgo de almacenar en caché una respuesta de error transitoria se mitiga por el hecho de que, la próxima vez que se actualice la caché, se espera que se use una respuesta correcta y correcta.

En el caso de las estrategias que implican almacenar en caché la primera respuesta recibida y reutilizarla de forma indefinida, las repercusiones de que un error transitorio se almacene en caché y se vuelva a usar son más graves. Para evitar errores de forma predeterminada, cacheFirst se negará a guardar 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.
}