Cache
=====

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
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` (en-US). 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` (en-US)) 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)` (en-US) 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 (en-US) para mais informações.

**Nota:** Implementações iniciais do Cache (tanto no Blink quando no Gecko) resolvem promises de `Cache.add` (en-US), `Cache.addAll` (en-US), e `Cache.put` (en-US) 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)` (en-US)

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

`Cache.matchAll(request, options)` (en-US)

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

`Cache.add(request)` (en-US)

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)` (en-US)

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)` (en-US)

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

`Cache.delete(request, options)` (en-US)

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)` (en-US)

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)` (en-US) para abrir quaisquer objetos `Cache` com um cabeçalho `Content-Type` que inicie com `font/`.

Então, utilizamos `Cache.match(request, options)` (en-US) 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)` (en-US) para adiciona-la ao cache.

O código gerencia as exceções disparadas pela operação `fetch()` (en-US). 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 (en-US).

**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 with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* Usando Service Workers (en-US)
* Exemplo básico de service workers
* Service workers estão prontos?
* `Promise`
* Usando Web Workers (en-US)