Sincronização e atualizações em segundo plano
Atualize caches e sincronize quando voltar a ficar online.
Sincronização e atualizações em segundo plano é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Mantendo os caches atualizados
Um aplicativo capaz de funcionar offline precisa ser atualizado de forma adequada: enviar novos recursos, remover os antigos e tentar novamente ações que falharam quando a conectividade retornar. Os trabalhadores de serviço fornecem ferramentas para as três tarefas.
Nomes de cache versionados
O mecanismo de atualização mais simples é usar um nome de cache versionado. Aumentar a versão cria um cache novo, deixando o antigo para ser removido durante a ativação.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Removendo caches antigos
No evento activate, liste todos os nomes de cache e remova aqueles que não correspondem à versão atual. Isso libera espaço de armazenamento e remove recursos desatualizados.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});O trabalhador em espera
Por padrão, um novo trabalhador é instalado, mas permanece no estado de espera até que todas as páginas controladas pelo trabalhador antigo sejam fechadas. Isso evita incompatibilidades entre versões durante a sessão.
skipWaiting
self.skipWaiting() instrui um trabalhador em espera a ser ativado imediatamente, assumindo o controle sem esperar que as abas sejam fechadas. Chame-o em install quando quiser que as atualizações sejam aplicadas imediatamente.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Após a ativação, self.clients.claim() permite que o novo trabalhador assuma imediatamente o controle das páginas já abertas, em vez de controlar apenas as futuras navegações.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Detectando atualizações a partir da página
A página pode escutar um novo trabalhador por meio do evento updatefound do registro e, em seguida, solicitar ao usuário que recarregue a página para obter a versão mais recente.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Sincronização em segundo plano
A API de sincronização em segundo plano permite adiar uma ação, como enviar um formulário, até que o dispositivo tenha conectividade. Você registra uma etiqueta de sincronização, e o navegador dispara um evento de sincronização quando estiver online.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Como lidar com o evento de sincronização
No trabalhador de serviço, escute a sincronização e compare a etiqueta. Use waitUntil para que o navegador mantenha o trabalhador ativo até que a nova tentativa seja concluída.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Padrão: enfileirar e sincronizar
Um fluxo offline robusto: salve a ação pendente no IndexedDB, registre uma sincronização e, no manipulador de sincronização, leia a fila e envie cada item com POST, removendo-o após o sucesso.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Recapitulação de atualizações e sincronização
Juntos, esses recursos tornam os aplicativos resilientes: caches versionados e a limpeza mantêm os recursos atualizados, skipWaiting/clients.claim controlam o momento da implantação, e a sincronização em segundo plano conclui as ações de forma confiável assim que o usuário volta a ficar online.
Verificação rápida
Avalie sua compreensão sobre atualizações e sincronização em segundo plano.
Recapitulação
Você aprendeu sobre sincronização em segundo plano e atualizações:
- Use nomes de cache versionados e remova os caches antigos em
activate. skipWaitingeclients.claimcontrolam o momento das atualizações.- Detecte novas versões por meio de
updatefound. - A sincronização em segundo plano adia ações até que o dispositivo esteja online por meio do evento
sync. - Enfileire no IndexedDB e depois esvazie a fila durante a sincronização.
Você concluiu o conteúdo sobre trabalhadores de serviço e cache offline.
Perguntas Frequentes
A aula “Sincronização e atualizações em segundo plano” é grátis?
Sim — o texto completo de “Sincronização e atualizações em segundo plano” é 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 “Sincronização e atualizações em segundo plano”?
Atualize caches e sincronize quando voltar a ficar online. 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 4 de 4.
Quanto tempo leva a aula “Sincronização e atualizações em segundo plano”?
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