Registo e ciclo de vida do Service Worker
Registar um script de Service Worker, compreender os eventos de instalação, ativação e obtenção do ciclo de vida e utilizar skipWaiting e clients.claim.
Registo e ciclo de vida do Service Worker é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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.
O que é um worker de serviço?
Um worker de serviço é um arquivo JavaScript executado em um worker separado do navegador (não na thread principal) que intercepta solicitações de rede para a sua origem. Ele é o mecanismo por trás de PWAs off-line, notificações instantâneas e sincronização em segundo plano.
Registrar um worker de serviço
Registre-o no seu script principal. Workers de serviço exigem HTTPS (exceto no localhost).
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}scope
Um worker de serviço controla as solicitações dentro do seu scope (o diretório a partir do qual é servido). /sw.js na raiz controla tudo. Um SW em /app/sw.js controla apenas /app/*.
Ciclo de vida: instalação → ativação → busca
Três eventos principais: install (uma vez, configura os armazenamentos em cache), activate (uma vez, limpa os armazenamentos antigos) e fetch (a cada solicitação — decide entre cache e network).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Por padrão, um SW atualizado espera todas as abas serem fechadas antes de ser ativado. self.skipWaiting() no manipulador de instalação força a ativação imediata — atualizações mais rápidas, mas com o risco de misturar recursos antigos e novos.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Após a ativação, um novo SW não controla páginas carregadas antes dele. self.clients.claim() no manipulador de ativação assume o controle imediatamente.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Atualizar o worker de serviço
Os navegadores verificam um novo sw.js a cada navegação (idade máxima de 24 h). Se o conteúdo do arquivo tiver mudado (diferente em bytes), ele será instalado como um novo SW e aguardará a ativação. Recarregue a página para acionar a ativação.
Detectar atualizações no aplicativo
Escute updatefound para mostrar uma solicitação de atualização.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Cancelar o registro
Para interromper um worker de serviço descontrolado (quando algo dá errado durante o desenvolvimento), cancele o registro dele.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools do navegador
DevTools do Chrome → Aplicativo → Workers de serviço mostra o SW registrado, permite cancelar o registro, simular a atualização ao recarregar e acompanhar passo a passo os eventos do ciclo de vida.
Armadilhas comuns
1) O arquivo do SW deve estar no scope raiz ou acima dele. 2) HTTPS é obrigatório. 3) Alterações no SW exigem uma recarga completa durante o desenvolvimento. 4) Armazene em cache uma vez e atualize por meio de versões, não pelo crescimento infinito do cache. 5) Não armazene solicitações POST em cache (elas não são compatíveis).
Workbox — a biblioteca de produtividade
O Workbox, do Google, abstrai o ciclo de vida e fornece estratégias de armazenamento em cache prontas. A maioria das PWAs em produção usa o Workbox em vez de código de SW escrito manualmente.
Verificação rápida
O que self.skipWaiting() faz dentro do manipulador de install de um worker de serviço?
Recapitulação: ciclo de vida do worker de serviço
Worker JavaScript que intercepta solicitações de rede para a sua origem. Registre-o por meio de navigator.serviceWorker.register. Ciclo de vida: instalação (configura os armazenamentos em cache), ativação (limpa os antigos) e busca (intercepta solicitações). Use skipWaiting e clients.claim para atualizações imediatas. Escute o evento de atualização encontrada para solicitar a ação do usuário. O Workbox abstrai o código repetitivo. HTTPS é obrigatório (exceto no localhost).
Perguntas Frequentes
A aula “Registo e ciclo de vida do Service Worker” é grátis?
Sim — o texto completo de “Registo e ciclo de vida do 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Registo e ciclo de vida do Service Worker”?
Registar um script de Service Worker, compreender os eventos de instalação, ativação e obtenção do ciclo de vida e utilizar skipWaiting e clients.claim. 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 2 de 4.
Quanto tempo leva a aula “Registo e ciclo de vida do 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 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