Estratégias de cache
Aplique os padrões primeiro o cache e primeiro a rede.
Estratégias de cache é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.
Por que as estratégias são importantes
Recursos diferentes exigem tratamentos diferentes. Um logotipo pode ser fornecido pelo cache para sempre; um feed de API precisa estar fresh. Uma estratégia de cache decide se deve tentar primeiro o cache ou a rede e como combiná-los.
Cache primeiro
Cache primeiro: verifique o cache; se encontrar o recurso, devolva-o; caso contrário, busque-o na rede. É ideal para recursos estáticos que raramente mudam, como fontes, CSS e imagens.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Cache primeiro com armazenamento alternativo
Quando não encontrar o recurso no cache, você pode buscá-lo e também armazenar o resultado, para que a próxima requisição seja rápida. Assim, o cache é preenchido aos poucos enquanto os usuários navegam.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Rede primeiro
Rede primeiro: tente a rede; se funcionar, use a resposta e armazene-a no cache; se falhar (quando estiver off-line), recorra ao cache. É ideal para conteúdo atualizado com frequência, como notícias ou painéis.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Obsoleto enquanto revalida
Obsoleto enquanto revalida: retorne imediatamente a cópia armazenada em cache para ganhar velocidade, enquanto busca uma cópia nova em segundo plano para atualizar o cache da próxima vez. Um ótimo equilíbrio entre velocidade e atualidade.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Somente rede e somente cache
Dois extremos simples:
- Somente rede: sempre busque os dados, sem nunca armazená-los em cache (por exemplo, sinais de análise).
- Somente cache: forneça apenas recursos armazenados previamente em cache, sem nunca acessar a rede (por exemplo, a estrutura básica de um aplicativo).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Roteamento por tipo de solicitação
Aplicativos reais escolhem uma estratégia para cada solicitação. Inspecione request.url ou request.destination no manipulador de busca e faça o roteamento adequado.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Como lidar com alternativas offline
Quando não houver correspondência nem na rede nem no cache, retorne uma página offline amigável ou um marcador de posição, em vez de uma resposta inválida.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Armazenando em cache apenas respostas bem-sucedidas
Evite armazenar erros em cache. Verifique response.ok (ou o status) antes de armazenar a resposta, para que um 404 ou 500 não contamine o cache.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Escolhendo uma estratégia
Associe a estratégia ao conteúdo:
- Recursos estáticos: cache primeiro
- Dados dinâmicos: rede primeiro
- Conteúdo misto: obsoleto enquanto revalida
A maioria dos aplicativos combina várias estratégias por meio do roteamento de solicitações.
Recapitulação das estratégias
As estratégias de cache permitem que um único trabalhador de serviço forneça todo o aplicativo de forma inteligente: recursos estáticos instantâneos, dados dinâmicos atualizados e alternativas offline adequadas, tudo escolhido para cada solicitação.
Verificação rápida
Avalie sua compreensão das estratégias de cache.
Recapitulação
Você aprendeu as estratégias de cache:
- Cache primeiro para recursos estáticos.
- Rede primeiro para dados dinâmicos atualizados.
- Obsoleto enquanto revalida para combinar velocidade e atualidade.
- Faça o roteamento por solicitação usando
request.url/destination. - Armazene em cache apenas respostas bem-sucedidas e forneça alternativas offline.
A seguir, sincronização em segundo plano e atualizações do cache.
Perguntas Frequentes
A aula “Estratégias de cache” é grátis?
Sim — o texto completo de “Estratégias de 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 “Estratégias de cache”?
Aplique os padrões primeiro o cache e primeiro a rede. 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 3 de 4.
Quanto tempo leva a aula “Estratégias de 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
- Registrando um Service Worker
- A API Cache
- Estratégias de cache
- Sincronização e atualizações em segundo plano