PWA de Exemplo 08
Já vimos o comportamento dos eventos install e activate no exemplo 07. Exploramos bastante o que ocorre quando o Service Worker é instalado pela primeira vez, e vimos o uso do clients.claim().
Neste exemplo iremos explorar o comportamento de quando o arquivo do Service Worker é alterado no servidor, mas já estava instalado e ativo no cliente. Lembre-se de que "roubamos" no exemplo anterior, e removemos o registro do Service Worker manualmente quando ele foi editado. Ou seja, era como se fosse uma "nova primeira vez".
Existe/existiu uma discussão muito longa, desde 2016, sobre como os navegadores deveriam lidar com alterações no arquivo do Service Worker, como o /pwa07/sw.js, especialmente no que diz respeito a como tratar o cabeçalho Cache-Control. Ao que tudo indica, os navegadores modernos ignoram o cabeçalho devolvido pelo servidor, e sempre assumem Cache-control: no-cache, atualizando a cópia local do arquivo do Service Worker sempre que ela é alterada. Contudo, como nunca se sabe qual é a versão/navegador do usuário, adicionar esse cabeçalho manualmente no servidor não é uma ideia tão ruim.
Novamente, as imagens acima apontam para arquivos que propositalmente não existem, e veremos dois erros na primeira vez que a página é aberta. Neste exemplo, porém, diferente do exemplo 07, o clients.claim() já é executado. Isso significa que nosso botão de adicionar imagens dinamicamente vai passar a mostrar as listras pretas e brancas já na primeira vez que a página é aberta.
Agora edite o arquivo do Service Worker, acrescentando um comentário qualquer. Em seguida, recarregue a página. Você verá a mensagem de que a nova versão do Service Worker está instalada, mas está esperando para ser ativada! E nem adianta apenas recarregar a página! Ela continua esperando!!!
Afinal... O que tanto espera? 🤔🤔🤔
Para ativar a nova versão, o navegador espera até que todos os clientes (páginas) abertos, ainda utilizando a versão antiga do Service Worker, sejam fechados! Se só existir uma página aberta, você não precisa realmente fechar e abrir a aba, bastando utilizar o atalho F5 (ou qualquer que seja o equivalente no seu teclado/navegador/sistema operacional 😁).
Como terceira e última parte deste exemplo, edite o arquivo do Service Worker da seguinte forma:
-
Descomente a linha
//self.skipWaiting(); -
Comente as três linhas que geram as listras pretas e brancas
let array = ... let blob = ... e.respondWith(new Response(blob)); -
Descomente a linha
//e.respondWith(fetch("../assets/images/fake.jpg")); - Atualize a página e perceba que a versão do Service Worker eventualmente vai mudar, sem exibir a mensagem de que está esperando. Além disso, as imagens inicias de exemplo aparecerão como as listras pretas e brancas, mas as imagens adicionadas dinamicamente serão os "X" vermelhos. Isso ocorre porque as imagens iniciais foram produzidas pela versão antiga do Service Worker, e as dinâmicas, pela versão nova! Se você atualizar a página, todas as imagens serão os "X" vermelhos.
Não existe certo ou errado no que diz respeito ao uso do self.skipWaiting(); e clients.claim();. É tudo uma questão dos requisitos do sistema!
* Em algumas versões de browsers mais modernos, faça o teste: tecle Ctrl+F5 (ou qualquer que seja o equivalente no seu teclado/navegador/sistema operacional) e veja se o Service Worker foi ativado para a página...
O código-fonte e as explicações podem ser encontradas no GitHub do projeto: github.com/tech-espm/labs-pwa 😊.