13

Vi que o Javascript tem uma classe chamada Cache. Pelo pouco que consegui entender parece ter relação com requisições.

Eu queria saber um pouco mais sobre essa classe:

  • Ela serve exclusivamente para apenas para requisições feitas com Request? Ou poderia ser usada com o XtmlHttpRequest padrão do Javascript?

  • Essa classe pode ser usada para fazer cache de outra coisa, que não seja o que foi citado na primeira pergunta?

  • Onde é armazenado esse cache?

  • Qual é o suporte dessa funcionalidade? Se há falta de suporte, é possível fazer Polyfill?

3
  • 3
    Quem deu o negativo pode explicar o que pode ser melhorado? 31/10/2018 às 20:43
  • visto que postou no StackOverflow em Português, acredito que ler a documentação em Português possa te ajudar, já deu uma olhada? developer.mozilla.org/pt-BR/docs/Web/API/Cache 27/02/2019 às 16:16
  • @FellipeSanches acredito que pergunta seja sobre especificações técnicas a respeito da implementação da classe Cache. Tanto que o link que você passou está incluído na pergunta. 3/03/2019 às 16:43

2 Respostas 2

7

A API Cache, obviamente, serve para manipular o cache da aplicação, geralmente implementada com service worker para interceptar as requisições feitas pela aplicação

//Sempre que ocorrer uma requisição
self.addEventListener('fetch', function(event) {
    //Se a origem da requisição for um xhr, fetch ou semelhante
    //o valor da propriedade destination será uma string vazia ('')
    console.log(event.request.destination || 'fetch');
    event.respondWith(
        caches.open('MyCacheName').then(function(cache) {
            return cache.match(event.request, {
                ignoreSearch: true
            });
        }).then(function(response) {
            console.log(response ? 'from cahche' : 'from fetch')
            return response || fetch(event.request);
        })
    );
});

No FecthEvent existe a propeiedade request do tipo Request que por sua vez possui o atriuto destination do tipo RequestDestination, ela é uma string que contém o destino da resposta, ou seja, de onde foi feita a requisição, os possíveis valores são:

  • "" The empty string is the default value of destination. What does it mean?

  • "audio" The target is audio data.

  • "audioworklet" The target is data being fetched for use by an audio worklet.

  • "document" The target is a document (HTML or XML).

  • "embed" The target is embedded content.

  • "font" The target is a font.

  • "image" The target is an image.

  • "manifest" The target is a manifest.

  • "object" The target is an object.

  • "paintworklet" The target is a paint worklet.

  • "report" The target is a report.

  • "script" The target is a script.

  • "serviceworker" The target is a service worker.

  • "sharedworker" The target is a shared worker.

  • "style" The target is a style

  • "track" The target is an HTML .

  • "video" The target is video data.

  • "worker" The target is a worker.

  • "xslt" The target is an XLST transform.

Para requisições feitas a partir da API fetch ou XMLHttpRequest o valor de destination é uma string vazia (""), mas existem muitos outros usos, e, na verdade, isso não tem nenhuma ligação direta com a API do Cache, ela pode ser usada nesse evento, assim como você pode implementar ela fora do service worker

Todos os caches feitos são guardados na variável global caches, ela é uma lista de "grupos de cache", por exemplo, posso organizar os caches da minha api de acordo com a versão (my-api-v1, my-api-v1.1, my-api-v2, etc). Ao "abrir" um desess grupos com cache.open lhe é retornado uma Promisse com uma instância de Cache que pode ser usada para guardar as respostas das requisições

Apesar de ser uma API experimental, sua compatibilidade é boa, e está disponível na maioria navegadores, pode ver a lista completa e atualizada na tabela da MDN

Existe Polyfill, recentemente implementei a API Cache em um PWA usando esse, você pode importar em um service worker usando a função importScripts

2
  • Por que o negativo?
    – Costamilam
    28/02/2019 às 2:21
  • baita resposta! :) 28/02/2019 às 21:19
6
+50

De acordo com a especificação:

A Cache object represents a request response list. Multiple separate objects implementing the Cache interface across documents and workers can all be associated with the same request response list simultaneously.

Em Português livre:

Um objeto Cache representa uma lista de resposta à requisição. Múltiplos objetos separados implementando a interface de Cache através de diversos documentos e workers poderão ser associados à mesma lista de resposta à requisição, simultaneamente.

Respondendo suas perguntas:

Ela serve exclusivamente para apenas para requisições feitas com Request? Ou poderia ser usada com o XtmlHttpRequest padrão do Javascript?

Não, apenas com o Request. O cache foi desenhado para ser usado em princípio com Service Workers, e faz parte da especificação dele. A API do cache só armazena pares de objetos Request/Response, que representam respectivamente o request/response do protocolo HTTP. O XMLHTTPRequest é bem primitivo e em geral eu não recomendaria o uso dele para nada. O fetch tem bastante suporte hoje em dia, além de um bom polyfill.

De certa forma, o cache pode ser visto como um array de objetos Request, funcionando como chaves das respostas, que o navegador em seguida armazena.

Essa classe pode ser usada para fazer cache de outra coisa, que não seja o que foi citado na primeira pergunta?

Através do cache de requisiçōes você pode armazenar quase todo conteúdo estático de uma aplicação. O cache é praticamente todo o conteúdo de um ServiceWorker básico, e com ele você pode armazenar fontes, páginas (vide explicação logo a seguir), imagens, arquivos JavaScript, CSS, etc. Exemplo:

Importante notar que não necessariamente você precisa do Service Worker para utilizar a API, por exemplo para armazenar recursos estáticos, você não precisa:

// Verifica que o navegador tem suporte para a API
if('caches' in window) {
  // Faz o cache de `assets` como fonte e imagem
  caches.open('meuCacheAqui').then(objetoDoCache => {
    objetoDoCache.addAll([
      '/assets/fonts/suaFonte.woff',
      '/assets/img/imagemBemBonita.jpg'
    ])
    .then(_ => console.log('Cache Realizado!'))
  })
}

Porém caso você queira armazenar uma página, então você precisaria de um Service Worker para manipular a requisição do navegador para recursos offline. Não daria para fazer com o Cache API sozinho.

O motivo de precisar de um ServiceWorker é que enquanto uma página pode ser lida e escrita através de um cache via window.caches, você precisaria de um ServiceWorker para interceptar a requisição inicial da página para então poder responder com um cache.

Onde é armazenado esse cache?

No próprio navegador, dentro do perfil do usuário que acessou o cache, dentro da armazenagem do Service Worker. Nos navegadores baseados no Chromium, ele fica dentro da pasta Service Worker. Não sei dizer os outros.

Qual é o suporte dessa funcionalidade? Se há falta de suporte, é possível fazer Polyfill?

Para o suporte, veja o MDN. Um Polyfill bem estável pode ser encontrado aqui.

Links úteis (Inglês):

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .