PWA de Exemplo 04
Como isso é um workshop, com uma série de exemplos que simulam aplicativos diferentes, estamos criando diversos arquivos sw.js.
Na vida real, é suficiente criar um único Service Worker por aplicativo, a não ser que seja necessário diferenciar seu comportamento, por alguma razão, em páginas diferentes.
Isso nos leva a um ponto muito importante sobre Service Workers que é seu escopo!
Repare que nessa página estamos registrando o Service Worker no arquivo /pwa04/sub/sw.js, que está em um subdiretório do exemplo 04.
Por mais que você atualize a página atual, as mensagens do Service Worker não aparecerão no console, porque ele não é utilizado para atender as requisições dessa página! Isso porque o escopo padrão do Service Worker é o dietório de seu arquivo, junto com seus subdiretórios!
No exemplo 03 o arquivo do Service Worker estava no arquivo /pwa03/sw.js. A segunda página estava no diretório /pwa03/sub/, que por ser um subdiretório do local onde o Service Worker estava, também era servido pelo Service Worker.
Aqui, no exemplo 04, a situação é diferente. O arquivo do Service Worker está em /pwa04/sub/sw.js. Logo, ele funcionará na próxima página, mas não aqui!
Podemos perceber que isso é verdade, já que o navegador não ofereceu instalar esse PWA... Porque como não temos um Service Worker aqui, o navegador não reconhece o exemplo 04 como um PWA! Nem mesmo a próxima página é considerada um PWA, porque o start_url do manifesto aponta para cá, e não temos um Service Worker aqui 😢!
Ir para a próxima página do exemplo 04!
O código-fonte e as explicações podem ser encontradas no GitHub do projeto: github.com/tech-espm/labs-pwa 😊.