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.
}

Tipos

CacheableResponse

Esta clase te permite configurar reglas que determinen qué códigos de estado o encabezados deben estar presentes para que se considere que un Response puede almacenarse en caché.

Propiedades

  • constructor

    void

    Para construir una instancia nueva de CacheableResponse, debes proporcionar al menos una de las propiedades de config.

    Si se especifican statuses y headers, se deben cumplir ambas condiciones para que Response se considere almacenable en caché.

    La función constructor se ve de la siguiente manera:

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    void

    Verifica una respuesta para ver si se puede almacenar en caché o no, según la configuración de este objeto.

    La función isResponseCacheable se ve de la siguiente manera:

    (response: Response) => {...}

    • respuesta

      Respuesta

      Es la respuesta cuya capacidad de almacenamiento en caché se está verificando.

    • resultados

      boolean

      true si Response se puede almacenar en caché y, de lo contrario, false.

CacheableResponseOptions

Propiedades

  • headers

    objeto opcional

  • estados

    number[] opcional

CacheableResponsePlugin

Una clase que implementa la devolución de llamada de ciclo de vida de cacheWillUpdate. Esto facilita la tarea de agregar verificaciones de capacidad de almacenamiento en caché a las solicitudes realizadas a través de las estrategias integradas de Workbox.

Propiedades

  • constructor

    void

    Para construir una instancia nueva de CacheableResponsePlugin, debes proporcionar al menos una de las propiedades de config.

    Si se especifican statuses y headers, se deben cumplir ambas condiciones para que Response se considere almacenable en caché.

    La función constructor se ve de la siguiente manera:

    (config: CacheableResponseOptions) => {...}