Página alternativa para uso off-line
Exiba uma página alternativa em cache quando o usuário estiver off-line.
Página alternativa para uso off-line é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Por que uma página off-line?
Quando a rede fica indisponível, um agente de serviço pode fornecer uma alternativa off-line personalizada em vez do erro genérico de "sem internet" do navegador. O usuário vê a marca, informações úteis e qualquer conteúdo armazenado em cache — muito melhor que um dinossauro do Chromium ou uma aba triste do Firefox.
Armazenando a alternativa em cache
No evento de instalação do agente de serviço, armazene previamente a página offline.html em cache para que ela esteja sempre disponível, mesmo antes de o usuário navegar para algum lugar sem conexão. O navegador garante que o cache sobreviva até a próxima alteração em sw.js.
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});Servindo em caso de falha
No evento de busca, tente primeiro acessar a rede; em caso de falha, retorne a página offline.html armazenada em cache. Esse padrão, de rede primeiro com alternativa off-line, é a receita mais simples para uma PWA e funciona para a maioria dos sites de conteúdo.
self.addEventListener("fetch", (e) => {
if (e.request.mode !== "navigate") return;
e.respondWith(
fetch(e.request).catch(() => caches.match("/offline.html"))
);
});Verificação do modo de navegação
Use a alternativa offline.html somente para requisições de navegação, ou seja, carregamentos de página de nível superior. Para imagens, scripts e outras requisições de sub-recursos, deixe que falhem ou use cópias armazenadas em cache específicas de cada recurso; fornecer uma página HTML no lugar de uma imagem ausente prejudica ainda mais a página.
Projetando a página off-line
Mantenha a página off-line leve: use o mínimo de CSS e nenhum recurso externo, a menos que ele também esteja armazenado em cache. Mostre o logotipo da marca, uma mensagem amigável ("Você está off-line — o conteúdo será carregado quando a conexão for restabelecida") e um botão Tentar novamente que chama location.reload().
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
<h1>You're offline</h1>
<p>This page is unavailable without an internet connection.</p>
<button onclick="location.reload()">Try again</button>
</body>
</html>Armazenando páginas visitadas em cache
Além de uma única página off-line, armazene em cache as páginas carregadas com sucesso usando uma estratégia de atualização enquanto ainda fornece a versão antiga ou um cache de execução. Ao voltar a um artigo visualizado recentemente sem conexão, o conteúdo continua sendo exibido; somente as páginas ainda não visitadas falham.
Atualizações da versão do cache
Ao atualizar a página offline.html, altere a constante CACHE em sw.js (CACHE = "v2"). No evento de ativação, exclua os caches antigos: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Páginas off-line desatualizadas causam confusão.
Testando off-line
O painel de rede do Chrome DevTools → limitação "Off-line" simula a ausência de rede. Navegue pelo aplicativo e verifique se a página off-line aparece para rotas ainda não visitadas e se as páginas visitadas anteriormente continuam carregando do cache.
Falha dos sub-recursos
Se a própria página off-line fizer referência a um arquivo CSS que não está armazenado em cache, esse arquivo não será carregado sem conexão e a página será renderizada sem estilos. Armazene previamente em cache todos os recursos necessários à página off-line (CSS, logotipo e fontes) no manipulador de instalação.
Além do off-line estático
PWAs avançadas enfileiram ações do usuário enquanto estão off-line usando a sincronização em segundo plano, tentam executá-las novamente quando a conectividade retorna e exibem uma interface otimista nesse meio-tempo. A biblioteca Workbox fornece receitas para esses padrões; criar uma solução própria também é possível, mas exige mais trabalho.
Restauração da conexão
Na página off-line, escute o evento de conexão para detectar a reconexão: window.addEventListener("online", () => location.reload()). A página é recarregada no momento em que a conectividade retorna, sem que o usuário precise tocar em Tentar novamente.
Não engane o usuário
Os botões "Tentar novamente" devem realmente fazer uma nova tentativa: chame location.reload(), não mostre um indicador de carregamento falso que não faz nada. Uma interface honesta preserva a confiança do usuário; páginas off-line enganosas prejudicam rapidamente a credibilidade quando o usuário percebe o problema.
Verificação de conhecimento
Por que a alternativa offline.html deve ser retornada somente para requisições de navegação (e.request.mode === "navigate") e não para todas as requisições que falharem?
Resumo
Agentes de serviço podem fornecer uma página off-line personalizada em vez do erro genérico do navegador. Armazene offline.html previamente em cache durante a instalação e forneça-a durante a busca quando a rede falhar e a requisição for de navegação. Mantenha a página autocontida, versione o cache para permitir atualizações e escute o evento de conexão para recarregá-la automaticamente. Teste usando a limitação off-line do DevTools.
Perguntas Frequentes
A aula “Página alternativa para uso off-line” é grátis?
Sim — o texto completo de “Página alternativa para uso off-line” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Página alternativa para uso off-line”?
Exiba uma página alternativa em cache quando o usuário estiver off-line. Você pratica HTML 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 HTML Academy?
Nenhuma experiência prévia é necessária. HTML 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 4 de 4.
Quanto tempo leva a aula “Página alternativa para uso off-line”?
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 HTML Academy?
Sim. Cada aula de HTML 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 de aplicativo Web
- Registro de service worker a partir do HTML
- Cor do tema e ícones do aplicativo
- Página alternativa para uso off-line