JavaScript Academy · Aula

A API Cache

Armazene e forneça respostas a partir do cache.

A API Cache é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é a API de cache?

A API de cache armazena pares de requisição e resposta em caches nomeados. Os trabalhadores de serviço a utilizam para fornecer recursos sem acessar a rede, o que é a base do suporte off-line.

O objeto caches

O objeto global caches (um CacheStorage) gerencia todos os seus caches nomeados. Ele está disponível tanto nas páginas quanto nos trabalhadores de serviço.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Abrindo um cache

caches.open(name) retorna uma promessa para um cache com esse nome, criando-o caso ele não exista. Os nomes permitem versionar seus caches.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Armazenamento prévio com addAll

Durante install, cache.addAll(urls) busca e armazena uma lista de recursos em uma única chamada. Se alguma busca falhar, toda a operação será rejeitada.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) informa ao navegador que mantenha o trabalhador ativo até que a promessa seja resolvida ou rejeitada. Envolva a configuração do cache nele, para que a instalação não termine cedo demais.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Adicionando uma entrada

cache.put(request, response) armazena uma única resposta, enquanto cache.add(url) busca e armazena uma URL. Use put quando você já tiver uma resposta para salvar.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Procurando no cache

cache.match(request) procura uma resposta armazenada. Ele é resolvido com a resposta ou com undefined quando não há correspondência.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Atalho caches.match

caches.match(request) pesquisa todos os caches de uma só vez, o que é útil em um manipulador de requisições quando não importa qual cache contém o recurso.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Dentro de um evento fetch, event.respondWith(promise) fornece a resposta que o navegador usará. Resolva a promessa com uma Response armazenada no cache ou obtida recentemente.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Clonando respostas

O corpo de uma resposta só pode ser lido uma vez. Para devolvê-la e armazená-la, faça primeiro uma cópia.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Excluindo entradas do cache

cache.delete(request) remove uma entrada; caches.delete(name) exclui um cache nomeado inteiro. Use esses métodos para remover recursos obsoletos.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Verificação rápida

Teste sua compreensão sobre a API de cache.

Recapitulação

Você aprendeu sobre a API de cache:

caches.open(name) obtém ou cria um cache nomeado.
addAll armazena recursos previamente no cache; put/add armazenam entradas.
match recupera recursos; caches.match pesquisa todos os caches.
respondWith fornece a resposta no evento fetch.
Clone as respostas antes de armazená-las no cache e devolvê-las.

Em seguida, veremos estratégias de cache.

Perguntas Frequentes

A aula “A API Cache” é grátis?

Sim — o texto completo de “A API Cache” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “A API Cache”?

Armazene e forneça respostas a partir do cache. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “A API Cache”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy