Registrando um Service Worker
Instale e ative um service worker.
Registrando um Service Worker é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.
O que é um trabalhador de serviço?
Um trabalhador de serviço é um programa executado pelo navegador em segundo plano, separado da página. Ele atua como um proxy de rede programável: pode interceptar requisições, fornecer respostas armazenadas no cache e permitir experiências off-line.
Detecção de recursos
Nem todo ambiente oferece suporte a trabalhadores de serviço. Verifique a existência de navigator.serviceWorker antes de fazer o registro, para que navegadores antigos continuem funcionando de forma adequada.
if ('serviceWorker' in navigator) {
// safe to register
}Registrando
Registre um trabalhador de serviço passando a URL do programa para navigator.serviceWorker.register. Isso retorna uma promessa que é resolvida com o objeto de registro.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Escopo do registro
O escopo é o conjunto de URLs controladas pelo trabalhador. Por padrão, ele corresponde ao diretório onde o programa está localizado. Um trabalhador em /sw.js controla todo o site; um em /app/sw.js controla somente /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Definindo um escopo explícito
Você pode restringir o escopo com uma opção, mas não pode ampliá-lo além do diretório do programa, a menos que um cabeçalho especial seja definido no servidor.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Requisito de HTTPS
Os trabalhadores de serviço exigem um contexto seguro: HTTPS em produção. localhost é considerado seguro durante o desenvolvimento. Isso impede que invasores assumam o controle do proxy de rede.
O evento install
Na primeira vez que um trabalhador é registrado, ele executa o evento install. É nesse momento que você normalmente armazena previamente no cache os recursos essenciais, para que o aplicativo funcione off-line.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});O evento activate
Depois da instalação, o trabalhador dispara activate. Esse é o momento de limpar caches antigos de versões anteriores antes que ele comece a controlar as páginas.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});O ciclo de vida
Um trabalhador de serviço passa pelos seguintes estados:
- installing — executando o manipulador de instalação
- installed/waiting — pronto e aguardando para assumir o controle
- activating / activated — agora controlando as páginas
Por padrão, um trabalhador novo aguarda até que as páginas antigas sejam fechadas antes de ser ativado.
Interceptando requisições
Depois de ativado, o trabalhador recebe todas as requisições de rede do seu escopo por meio do evento fetch. Você pode responder usando o cache, a rede ou uma combinação dos dois.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Recapitulação do registro
Para registrar um trabalhador de serviço: faça a detecção de recursos, chame register com uma URL de programa, observe o escopo e o requisito de HTTPS e trate os eventos install, activate e fetch dentro do programa do trabalhador.
Verificação rápida
Teste sua compreensão sobre o registro de um trabalhador de serviço.
Recapitulação
Você aprendeu a registrar um trabalhador de serviço:
- Faça a detecção de recursos com
'serviceWorker' in navigator. register(url, { scope })retorna uma promessa.- Por padrão, o escopo é o diretório do programa; HTTPS é obrigatório.
- Trate
install,activateefetchno trabalhador.
Em seguida, veremos a API de cache.
Perguntas Frequentes
A aula “Registrando um Service Worker” é grátis?
Sim — o texto completo de “Registrando um Service Worker” é 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 “Registrando um Service Worker”?
Instale e ative um service worker. 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 1 de 4.
Quanto tempo leva a aula “Registrando um Service Worker”?
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