fala Guilherme, uma atualização do Service Worker é acionada automaticamente pelo navegador assim que o arquivo de sw for alterado,
Podemos reunir alguns outros motivos também:
Um evento de navegação para uma página dentro do escopo de um sw
Eventos funcionais como push ou sync ou uma verificação de atualização do arquivo de sw (pelo navegador) nas últimas 24 horas
Chamando .register(), no caso da URL do sw ter sido alterada, você deve evitar mudar a url do seu sw em caso de trabalho offline (ex: index.html registra sw-v1.js como sw, o sw faz o cache do index.html para trabalhar offline, você atualiza o index.html para usar sw-v2.js, o usuário nunca receberá o sw-v2.js)
Quando uma atualização acontece, o comportamento padrão é:
O novo sw é executado pelo navegador ao lado do sw atual, com seu próprio evento install, rodando em um novo contexto
Caso o novo sw não esteja ok, tenha falha de sintaxe, algum 404 ou jogue um erro, a instalação é rejeitada e o novo sw é removido, mas o atual ainda continua controlando a página
Caso o novo sw tenha sucesso em sua instalação, ele irá aguardar até que o sw atual não esteja controlando nenhum cliente, ou seja, todos as tabs, navegadores, sessões usando o sw atual tem que ser fechadas (nesse período, o cliente/navegador/tab terá um overlap com os DOIS sw na página)
podemos usar o self.skipWaiting() para remover essa espera e assumir o controle da página assim que o sw for instalado
vou me concentrar no arquivo de sw nos exemplos a seguir,
vamos supor que instalamos o seguinte sw:
self.addEventListener('install',event=>{console.log('instalando sw-v1');// - criamos um cache 'static-v1'// - adicionamos 'banner.jpg' ao cacheevent.waitUntil(caches.open('static-v1').then(cache=>cache.add('/banner.jpg')));});self.addEventListener('activate',event=>{console.log('o sw-v1 está pronto para interceptar eventos e requests');});self.addEventListener('fetch',event=>{consturl=newURL(event.request.url);// response com 'banner.jpg' do cache se o request for// da mesma origin e o caminho ser '/hero.jpg'if(url.origin==location.origin&&url.pathname=='/hero.jpg'){event.respondWith(caches.match('/banner.jpg'));}});
agora, vamos atualizar o sw para um nova versão, lembrando, que "atualizar um sw" é basicamente mudar qualquer byte dentro do arquivo registrado como sw,
self.addEventListener('install',event=>{console.log('instalando sw-v2');// - criamos um cache 'static-v2'// - adicionamos 'novo-banner.jpg' ao cache// - adicionamos 'self.skipWaiting()' para instalar a nova versão imediatamenteevent.waitUntil(caches.open('static-v2').then(cache=>cache.add('/novo-banner.jpg'))).then(()=>self.skipWaiting())});self.addEventListener('activate',event=>{console.log('o sw-v2 está pronto para interceptar eventos e requests');});self.addEventListener('fetch',event=>{consturl=newURL(event.request.url);// response com 'novo-banner.jpg' do cache se o request for// da mesma origin e o caminho ser '/hero.jpg'if(url.origin==location.origin&&url.pathname=='/hero.jpg'){event.respondWith(caches.match('/novo-banner.jpg'));}});
Você pode perceber o uso do self.skipWaiting() na fase de instalação, isso irá silenciosamente dar controle da página para o novo sw, resultando na "atualização silenciosa" mencionada aqui.
Olhando o artigo novamente, você pode ver que enviamos um evento para o sw do frontend em:
// ... um pedaço do exemplo completo do artigo// o evento "stagechange" irá ser disparado pelo navegador, a gente não controla issonewWorker.addEventListener("statechange",()=>{// O estado do Service Worker mudou?switch(newWorker.state){case"installed":{// Existe um novo Service Worker disponível, mostra a notificaçãoif(navigator.serviceWorker.controller){letnotification=document.getElementById("notification");notification.className="show";break;}}}});// na notifação, enviamos um evento para o swdocument.getElementById("reload").addEventListener("click",function(){newWorker.postMessage({action:"skipWaiting"});});// no sw, se o usuário clicar na mensagem do banner, ativamos o novo sw imediatamenteself.addEventListener("message",function(event){if(event.data.action==="skipWaiting"){self.skipWaiting();}});
Desse modo, o cliente controla se ele deve atualizar no momento que a detecção de uma nova versão do sw PELO navegador acontece.
A atualização irá acontecer de qualquer modo, se houver um novo sw, o navegador irá atualizar o cliente com base nas regras descritas no começo desse comentário.
Se tiver mais dúvidas só mandar!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
fala Guilherme, uma atualização do Service Worker é acionada automaticamente pelo navegador assim que o arquivo de sw for alterado,
Podemos reunir alguns outros motivos também:
push
ousync
ou uma verificação de atualização do arquivo de sw (pelo navegador) nas últimas 24 horas.register()
, no caso da URL do sw ter sido alterada, você deve evitar mudar a url do seu sw em caso de trabalho offline (ex:index.html
registrasw-v1.js
como sw, o sw faz o cache doindex.html
para trabalhar offline, você atualiza oindex.html
para usarsw-v2.js
, o usuário nunca receberá osw-v2.js
)Quando uma atualização acontece, o comportamento padrão é:
install
, rodando em um novo contextoself.skipWaiting()
para remover essa espera e assumir o controle da página assim que o sw for instaladovou me concentrar no arquivo de sw nos exemplos a seguir,
vamos supor que instalamos o seguinte sw:
agora, vamos atualizar o sw para um nova versão, lembrando, que "atualizar um sw" é basicamente mudar qualquer byte dentro do arquivo registrado como sw,
Você pode perceber o uso do
self.skipWaiting()
na fase de instalação, isso irá silenciosamente dar controle da página para o novo sw, resultando na "atualização silenciosa" mencionada aqui.Olhando o artigo novamente, você pode ver que enviamos um evento para o sw do frontend em:
Desse modo, o cliente controla se ele deve atualizar no momento que a detecção de uma nova versão do sw PELO navegador acontece.
A atualização irá acontecer de qualquer modo, se houver um novo sw, o navegador irá atualizar o cliente com base nas regras descritas no começo desse comentário.
Se tiver mais dúvidas só mandar!