Como Usar Service Worker para Modo Offline — Guia Fácil para Seu Site
Olá, viajante da web! Se você já se perguntou como deixar seu site funcionando mesmo sem internet, chegou a hora de aprender um truque mágico chamado Service Worker. Ele é como um pequeno assistente que fica guardando partes do seu site para que, mesmo offline, o usuário ainda possa navegar e ver conteúdo.
Na GeHost, você tem tudo o que precisa para colocar isso em prática — e não precisa ser um programador ninja. Vamos juntos, passo a passo, como preparar seu site para funcionar no modo offline com esse superpoder.
O que é um Service Worker?
Imagine um guardião invisível no seu site. Ele fica escutando todas as requisições do navegador e, quando você está online, busca os arquivos do servidor. Mas quando não tem internet, ele já tem os arquivos guardados e entrega para o usuário — como um livro que você já leu e lembra de cor.
Dica do Sensei: O Service Worker só funciona em sites com HTTPS. Na GeHost, todos os sites já têm SSL gratuito — então você já está no caminho certo!
Passo a Passo: Ativando o Modo Offline com Service Worker
-
Entre no Gerenciador de Arquivos do cPanel
Para começar, faça login no cPanel da sua conta. Após logar, clique em Gerenciador de Arquivos (File Manager) na seção "Arquivos".
-
Abra a pasta do seu site
No Gerenciador de Arquivos, clique em public_html — essa é a pasta principal do seu site. É aqui que ficam todas as páginas, imagens e arquivos principais.
-
Crie o arquivo do Service Worker
Clique no botão Novo Arquivo (no topo do painel) e digite o nome: service-worker.js. Clique em "Criar".
Esse arquivo vai conter as instruções do seu guardião invisível.
-
Insira o código básico do Service Worker
Clique duas vezes no arquivo service-worker.js para editá-lo. Cole o código abaixo:
self.addEventListener('install', event => { event.waitUntil( caches.open('meu-site-offline').then(cache => { return cache.addAll([ '/', '/index.html', '/sobre.html', '/contato.html', '/css/style.css', '/js/app.js', '/img/logo.png' ]); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });Importante: Substitua os caminhos dos arquivos (como
/index.htmlou/css/style.css) pelos reais do seu site. Você pode adicionar mais arquivos conforme necessário. -
Salve o arquivo
Após colar o código, clique em Salvar no editor. O Service Worker agora está pronto!
-
Adicione o Service Worker ao seu site
Agora, abra o arquivo principal do seu site (geralmente
index.html) no Gerenciador de Arquivos.Adicione esta linha no
<head>do seu HTML:<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); } </script>Isso ativa o Service Worker assim que o site for aberto.
-
Teste no navegador
Abra seu site no navegador (Chrome é o mais recomendado para testes). Abra as Ferramentas do Desenvolvedor (F12), vá até a aba Application e veja se o Service Worker aparece como "Active".
Depois, desative a internet (ou use o modo "Offline" no DevTools) e recarregue a página. Se o site ainda carregar, parabéns! Seu site agora funciona offline!
Dica Extra do Sensei
Se você quiser que seu site atualize automaticamente quando houver novas versões, adicione um pequeno ajuste no Service Worker. Ele vai verificar se há atualizações sempre que o usuário acessar o site — como um amigo que sempre te avisa quando algo muda.
Dica do Sensei: Comece com poucos arquivos (como a página inicial e o CSS). Depois, vá adicionando mais conforme seu site cresce. Assim, o cache não fica muito pesado!
Pronto! Você é um herói do modo offline agora.
Com esse pequeno truque, seu site se torna mais rápido, mais resiliente e mais amigável — mesmo quando a internet está ruim. Na GeHost, você tem tudo o que precisa para criar experiências incríveis, sem precisar de mágicas complexas.
Se precisar de ajuda, é só chamar. Estou aqui, como sempre, com um sorriso e um café quentinho. 🍵
