Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst
Implementar Cache-First para recursos estáticos e Network-First para respostas de API utilizando a Cache API e a biblioteca Workbox.
Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst é uma aula grátis de Frontend 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que as estratégias de cache são importantes
Workers de serviço podem interceptar cada busca — mas é necessário ter uma estratégia. Conteúdos diferentes precisam de regras diferentes: um logotipo deve permanecer no cache para sempre, uma resposta de API deve estar sempre atualizada e artigos de notícias se beneficiam de ser servidos do cache enquanto são revalidados.
A API de cache
Workers de serviço usam a API de cache: um armazenamento de pares Solicitação → Resposta, delimitado por origem. Os dados permanecem entre as sessões.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache primeiro
Verifique o cache primeiro. Se encontrar o recurso, retorne-o. Caso contrário, recorra à network e armazene a resposta no cache. Ideal para: recursos estáticos, fontes, logotipos e o esqueleto do aplicativo.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Rede primeiro
Tente usar a network primeiro. Se ela falhar (modo off-line), recorra ao cache. Ideal para: chamadas de API e conteúdo dinâmico em que a atualização é mais importante que a velocidade.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Servir do cache enquanto revalida
Retorne o cache imediatamente (com rapidez), depois busque o conteúdo em segundo plano e atualize o cache para a próxima vez. Ideal para: avatares, artigos de notícias e dados parcialmente atualizados.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Somente rede
Ignore o cache completamente — sempre use a network. Use para solicitações que não podem ser armazenadas em cache (endpoints de autenticação, análises e mutações).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Somente cache
Nunca use a network — retorne o cache ou falhe. É útil para arquivos armazenados previamente em cache que nunca devem ser atualizados durante uma sessão.
Estratégias do Workbox
O Workbox reúne todas as estratégias como classes nomeadas. Menos código repetitivo.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Expiração do cache
Os armazenamentos em cache crescem para sempre, a menos que você defina limites. O Workbox fornece ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Resposta armazenável em cache
Por padrão, os navegadores armazenam em cache apenas respostas 200. Ignore respostas 4xx, 5xx e opacas (de origem cruzada sem CORS) para evitar encher o cache com erros.
Página alternativa off-line
Mostre uma página off-line amigável quando uma navegação falhar — uma experiência melhor do que o erro padrão do navegador.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Escolher a estratégia certa
Recursos estáticos (logotipo, fonte, CSS): Cache primeiro. Dados de API (perfil do usuário, feed): Rede primeiro. Conteúdo atualizado ocasionalmente (avatares, notícias): servir do cache enquanto revalida. Autenticação: somente rede. Arquivos estáticos pré-instalados: somente cache.
Verificação rápida
Qual estratégia de cache é melhor para um arquivo CSS que raramente muda, mas precisa carregar rapidamente?
Recapitulação: estratégias de cache
Cache primeiro: recursos estáticos (mais rápido, mas pode estar desatualizado). Rede primeiro: dados de API (mais atualizados, porém mais lento). Servir do cache enquanto revalida: entrega o cache e busca em segundo plano. Somente rede: autenticação e mutações. Somente cache: esqueleto pré-instalado. Use o Workbox para reduzir o código repetitivo. Defina limites de expiração. Adicione uma página alternativa off-line. Escolha uma estratégia por tipo de recurso.
Perguntas Frequentes
A aula “Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst” é grátis?
Sim — o texto completo de “Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst”?
Implementar Cache-First para recursos estáticos e Network-First para respostas de API utilizando a Cache API e a biblioteca Workbox. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 armazenamento offline em cache: CacheFirst e NetworkFirst”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- O manifesto da aplicação Web
- Registo e ciclo de vida do Service Worker
- Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst
- Notificações push