Registro de service worker a partir do HTML

Um service worker é um arquivo JavaScript executado em segundo plano, separado de qualquer página, que intercepta solicitações de rede dentro do seu escopo. Ele oferece suporte off-line, notificações push, sincronização em segundo plano e carregamentos repetidos mais rápidos por meio de cache.

Use register para registrar o worker a partir de um script da página: navigator.serviceWorker.register("/sw.js"). O navegador busca /sw.js, analisa-o, executa seu evento de instalação e começa a interceptar solicitações dentro do escopo do registro.

Navegadores antigos não oferecem suporte a service workers. Sempre faça a detecção do recurso com "serviceWorker" in navigator antes de chamar register; caso contrário, a chamada gera um erro em navegadores que não têm essa API. Não é viável usar um preenchimento de compatibilidade — service workers não podem ser implementados dessa forma porque exigem integração no nível do navegador.

O escopo é o prefixo de caminho que o worker controla. Por padrão, o escopo é o diretório do arquivo do worker: /sw.js controla todas as URLs dentro de /. Para registrar um worker com escopo mais profundo a partir de um local de arquivo diferente, defina a opção de escopo AND disponibilize o cabeçalho Service-Worker-Allowed.

Coloque sw.js na raiz do aplicativo (/sw.js) para que seu escopo padrão cubra todo o site. Caminhos mais profundos (/app/sw.js) limitam o escopo a /app/ e abaixo, o que raramente é desejável.

Faça register do worker depois que a página carregar para evitar a disputa por largura de banda durante a renderização crítica: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Os recursos de PWA entram em ação nas visitas seguintes sem atrasar a primeira visita.

O navegador verifica automaticamente se há um sw.js atualizado (normalmente a cada 24 horas e na maioria dos carregamentos de página). Se o conteúdo do arquivo tiver mudado, o novo worker será baixado, instalado e ficará no estado "waiting" até que todas as guias existentes sejam fechadas — then ele será ativado.

registration.update() aciona manualmente uma verificação de atualização. self.skipWaiting() dentro do novo sw.js o ativa imediatamente, sem esperar que as guias sejam fechadas. Combine-os para obter o comportamento de "sempre executar o worker mais recente", ao custo de novas buscas durante a sessão.

registration.unregister() remove o worker. Isso é útil durante o desenvolvimento se um worker com defeito estiver prejudicando o site. No Chrome DevTools, Application → Service Workers oferece um botão "Unregister" para a mesma finalidade durante a depuração.

Registrar um worker por HTTP (sem HTTPS) falha silenciosamente — service workers exigem uma origem segura (HTTPS ou localhost para desenvolvimento). Verifique o console em busca da mensagem "An SSL certificate error occurred" se o registro não estiver funcionando.

O worker não tem acesso ao DOM. Para trocar mensagens, use navigator.serviceWorker.controller.postMessage() na página e self.addEventListener("message", handler) no worker, e vice-versa. Isso é útil para invalidação de cache, verificações de versão e eventos personalizados.

Na primeira visita, o worker é instalado e começa a controlar as páginas somente depois que a página é recarregada. Para controlar imediatamente a primeira navegação, chame self.clients.claim() no evento de ativação — isso é útil para aplicativos que priorizam o uso off-line.

Por que os service workers precisam ser servidos por HTTPS (ou localhost)?

Registre service workers a partir do JS da página usando navigator.serviceWorker.register("/sw.js") depois de detectar o recurso. Coloque sw.js na raiz do aplicativo para obter o escopo completo. Faça register no carregamento para evitar a disputa com a renderização crítica. As atualizações são verificadas periodicamente de forma automática; force-as com registration.update ou skipWaiting. HTTPS é necessário para impedir a injeção maliciosa de workers.