Cache

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A interface de Cache provê um mecanismo de pares de objeto Request / Response que estão cacheados, por exemplo, como parte do ciclo de vida de um ServiceWorker. Note que a interface do Cache é exposta a escopos de janela como também aos workers. Você não precisa utiliza-la em conjunto com os service workers em si, mesmo que ela esteja definida na especificação dos mesmos.

Uma origem pode ter múltiplos objetos de cache nomeados. Você é o responsável por implementar como seu script (por exemplo, em um ServiceWorker) trata uma atualização deste Cache. Itens em um Cache não são atualizados a não ser que explicitamente comandados para fazer tal coisa, também não expiram a não ser quando são deletados. Use CacheStorage.open(cacheName) para abrir um Cache nomeado específico e depois chame qualquer um dos métodos presentes no Cache para manter os objetos cacheados.

Você é também o responsavel por, periódicamente, limpar as entradas de cache. Cada browser tem um limite fixo do tamanho de armazenamento de cache que cada origem pode utilizar. O browser faz o melhor que pode para gerenciar o espaço em disco, mas ele pode deletar um cache que não devia. Ele também vai, geralmente, deletar todos os dados de uma origem ou nenhum dado da mesma, nunca haverá uma ocasião não atômica onde o browser delete parcialmente os dados.

Certifique-se de versionar seus caches por nome e usar somente os caches nas versões do script que eles podem seguramente operar. Veja também o artigo sobre remoção de caches antigos para mais informações.

Nota: Implementações iniciais do Cache (tanto no Blink quando no Gecko) resolvem promises de Cache.add, Cache.addAll, e Cache.put somente quando o corpo completo da resposta foi armazenado. Versões mais recentes desta especificação possuem uma melhora de linguagem informando que o browser pode resolver a promise assim que a entrada é registrada no banco de dados, mesmo que o corpo da resposta ainda esteja sendo enviado.

Nota: O algoritmo de comparação de chaves depende do cabeçalho VARY no valor. Então, comparar uma nova chave depende tanto de olhar para o valor e para a própria chave para novas entradas no cache.

Nota: A API de cache não segue os padrões HTTP de cabeçalhos de Cache.

Métodos

Cache.match(request, options)

Retorna uma Promise que resolve para a resposta associada com a primeira requisição encontrada no objeto Cache.

Cache.matchAll(request, options)

Retorna uma Promise que resolve para um array com todas as referências encontradas de requisições presentes no objeto Cache.

Cache.add(request)

Pega a URL, obtém o resultado da resposta e adiciona o mesmo no cache informado. Esta funcionalidade é equivalente a chamar fetch(), e depois utilizar Cache.put() para adicionar o resultado no cache.

Cache.addAll(requests)

A partir de um array de URL's, obtém as respostas e adiciona todos os objetos resultantes no cache informado.

Cache.put(request, response)

Dado uma requisição e uma resposta, adiciona ambas ao cache informado.

Cache.delete(request, options)

Encontra a entrada do Cache na qual a chave é a requisição e, se encontrada, deleta a entrada do Cache e retorna uma Promise que se resolve para true. Se nenhuma entrada do Cache for encontrada, ela é resolvida para false.

Cache.keys(request, options)

Retorna uma Promise que resolve em um array de chaves de Cache.

Exemplos

Este trecho de código é da amostra de cache seletivo (veja seleção live de cache), ele utiliza CacheStorage.open(cacheName) para abrir quaisquer objetos Cache com um cabeçalho Content-Type que inicie com font/.

Então, utilizamos Cache.match(request, options) para verificar se já existe uma fonte encontrada no cache e, se existir, retorna-la. Caso contrário, o código busca a fonte da rede e utiliza Cache.put(request, response) para adiciona-la ao cache.

O código gerencia as exceções disparadas pela operação fetch(). Note que uma resposta de erro HTTP (como o 404) não vai ativar uma exceção. Será retornado um objeto de resposta padrão que possui seu próprio código de erros.

O trecho também mostra as melhores práticas de versionamento de caches utilizadas pelo service worker. Mesmo que só estejamos utilizando um cache neste exemplo, a mesma aproximação pode ser utilizada para múltiplos caches. Mapeamos um identificador para um cache específico e versionado. Por fim, o código deleta todos os cache que não estão presentes em CURRENT_CACHES.

No exemplo, "Caches" é um atributo dos service workers no WorkerGlobalScope. Ele contém o CacheStorage, um objeto pelo qual podemos acessar a API de mesmo nome.

Nota: No Chrome, visite chrome://inspect/#service-workers e clique no link "inspect" abaixo do service worker registrado para analisar os logs das várias ações que o script "service-worker.js" está executando.

js
var CACHE_VERSION = 1;

// Identificador menor para uma versão específica do cache
var CURRENT_CACHES = {
  font: "font-cache-v" + CACHE_VERSION,
};

self.addEventListener("activate", function (event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
    return CURRENT_CACHES[key];
  });

  // O worker não vai ser tratado como ativo até que a Promise se resolva.
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log("Deletando cache expirado:", cacheName);

            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
});

self.addEventListener("fetch", function (event) {
  console.log("Obtendo evento fetch para", event.request.url);

  event.respondWith(
    // Abre o objeto de cache que inicia com 'font'
    caches.open(CURRENT_CACHES["font"]).then(function (cache) {
      return cache
        .match(event.request)
        .then(function (response) {
          if (response) {
            console.log(" Encontrou resposta em cache:", response);

            return response;
          }
        })
        .catch(function (error) {
          // Trata exceções que vem de match() ou fetch().
          console.error("  Erro na handler:", error);

          throw error;
        });
    }),
  );
});

Especificações

Specification
Service Workers
# cache-interface

Tabela de compatibilidade

BCD tables only load in the browser

Ver também