workbox-cacheable-response

Ao armazenar recursos em cache no momento da execução, não há uma regra única para saber se uma resposta específica é "válida" e qualificada para ser salva e reutilizada.

O módulo workbox-cacheable-response oferece uma maneira padrão de determinar se uma resposta precisa ser armazenada em cache com base no código de status numérico, na presença de um cabeçalho com um valor específico ou uma combinação dos dois.

Armazenamento em cache com base em códigos de status

Você pode configurar uma estratégia do Workbox para considerar um conjunto de códigos de status como qualificado para armazenamento em cache adicionando um instância CacheableResponsePlugin para o parâmetro plugins de uma estratégia:

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],
      }),
    ],
  })
);

Essa configuração informa ao Workbox que, ao processar respostas para solicitações contra https://third-party.example.com/images/, armazene em cache todas as solicitações com um código de status de 0 ou 200.

Armazenamento em cache com base em cabeçalhos

É possível configurar uma estratégia do Workbox para verificar a presença de valores de cabeçalho específicos como critérios para serem adicionados ao cache definindo o objeto headers ao criar o plug-in:

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',
        },
      }),
    ],
  })
);

Ao processar respostas para URLs de solicitação que contêm /path/to/api/, confira o cabeçalho X-Is-Cacheable, que será adicionado à resposta pelo servidor. Se esse cabeçalho estiver presente e se for definido como o valor "true", a resposta pode ser armazenada em cache.

Se vários cabeçalhos forem especificados, somente um deles precisará correspondem aos valores associados.

Armazenamento em cache com base em cabeçalhos e códigos de status

É possível misturar a configuração de status e de cabeçalho. Ambas as condições precisam ser atendidas para que uma resposta seja considerada armazenável em cache. Em outras palavras, a resposta precisa ter um dos códigos de status configurados e pelo menos um dos cabeçalhos fornecidos.

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',
        },
      }),
    ],
  })
);

Quais são os padrões?

Se você usar uma das estratégias integradas do Workbox sem configurar explicitamente um cacheableResponse.CacheableResponsePlugin, os seguintes critérios padrão serão usados para determinar se uma resposta recebida da rede precisa ser armazenada em cache:

• Sta.Revalidate e networkFirst: respostas com o status 0 (ou seja, respostas opacas) ou 200 são considerados armazenáveis em cache.
• cacheFirst: as respostas com um status de 200 são consideradas armazenáveis em cache.

Por padrão, os cabeçalhos de resposta não são usados para determinar a capacidade de armazenamento em cache.

Por que existem padrões diferentes?

Os padrões variam em relação às respostas com status 0 (ou seja, respostas opacas) elas serão armazenadas em cache. Devido à natureza "caixa-preta" das respostas opacas, não é possível para o service worker saber se a resposta é válida ou se reflete uma resposta de erro retornada pelo servidor de origem cruzada.

Para estratégias que incluem algumas formas de atualizar a resposta armazenada em cache, como desacelerar enquanto Revalida e o networkFirst, o risco de armazenar em cache a resposta de erro temporária é atenuada pelo fato de que da próxima vez e o cache é atualizado, esperamos usar uma resposta adequada e bem-sucedida.

Para estratégias que envolvem o armazenamento em cache da primeira resposta recebida e reutilizar essa resposta em cache indefinidamente, erros temporários que são armazenados em cache e reutilizados são mais graves. Para evitar erros por padrão, o cacheFirst se recusa a salvar uma resposta, a menos que ela tenha um código de status 200.

Uso Avançado

Se você quiser usar a mesma lógica de armazenamento em cache fora de uma estratégia do Workbox, use a classe CacheableResponse diretamente.

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