Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problemas ao ouvir evento fetch em service worker

Após registrar um service worker, não estou conseguindo que o código do mesmo seja executado.

Registrei o mesmo com o código:

navigator.serviceWorker.register('js/serviceWorker/service-worker.js').then(function(registration) {
    console.log('sw registrado com sucesso');
}).catch(function(error) {
    console.error('erro ao registrar sw');
    console.error(error);
});

No console do navegador, é exibida a mensagem: "sw registrado com sucesso"

Porém, ao recarregar a tela (que contém alguns cartões com imagens), o service worker não é executado.

Segue código do service worker:

self.addEventListener('fetch', function () {
    console.log('executando sw');
});

Em nenhum momento é exibida a mensagem "executando sw" no console... tentei debugar com breakpoints do navegador e pude ver que a linha do self.addEventListener é executada, mas a função registrada nunca é chamada...

3 respostas
solução!

Oi Jefferson, me parece um problema de escopo. O SW só consegue acessar o escopo onde foi definido o arquivo - no seu caso, ele só vai pegar fetchs dentro da pasta /js/.

Tenta mover o arquivo pra raiz

Sérgio, muito obrigado pela ajuda, era isso mesmo. Essa parte do escopo não tinha ficado clara.

Há algum padrão para onde devo deixar os arquivos de service workers na aplicação? Neste momento acabo de movê-lo para a raiz, junto com o index.html, porém se eu tiver mais de um arquivo, isso não fica muito organizado...

Se você quer um service worker que pegue o site todo, ele vai ter que ficar na raiz mesmo. Mas em geral é um arquivo só então nao desorganiza muito. Se vc for importar outros scripts dentro dele, esses arquivos podem estar em outras pastas.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software