Este codelab mostra como registrar um service worker no seu aplicativo da Web e usar o Chrome DevTools para observar o comportamento dele. Ele também aborda algumas técnicas de depuração que podem ser úteis ao lidar com service workers.
Conhecer o projeto de exemplo
Os arquivos do projeto de exemplo mais relevantes para este codelab são:
register-sw.jscomeça vazio, mas contém o código usado para registrar o service worker. Ele já está sendo carregado por uma tag<script>dentro doindex.htmldo projeto.service-worker.jsestá vazio de forma semelhante. É o arquivo que vai conter o service worker do projeto.
Adicione o código de registro do service worker
Um service worker (mesmo um vazio, como o arquivo service-worker.js atual)
não será usado, a menos que seja
registrado
primeiro. Você pode fazer isso por meio de uma chamada para:
navigator.serviceWorker.register(
'/service-worker.js'
)
no arquivo register-sw.js.
No entanto, antes de adicionar esse código, há alguns pontos a serem considerados.
Em primeiro lugar, nem todos os navegadores são compatíveis com service workers. Isso é especialmente verdadeiro para versões mais antigas de navegadores que não são atualizados automaticamente. Portanto, é uma prática recomendada chamar navigator.serviceWorker.register() condicionalmente, depois de verificar se navigator.serviceWorker tem suporte.
Segundo, quando você registra um service worker, o navegador executa o código no
arquivo service-worker.js e pode começar a fazer o download de URLs para preencher
caches, dependendo do código nos gerenciadores de eventos
install
e
activate
do seu service worker.
A execução de mais código e o download de recursos podem usar recursos valiosos que o navegador poderia usar para exibir a página da Web atual. Para evitar essa interferência, é recomendável atrasar
o registro de um service worker até que o navegador termine de renderizar a
página atual. Uma maneira conveniente de aproximar isso é aguardar até que o evento window.load seja disparado.
Juntando esses dois pontos, adicione este código de registro de service worker
de uso geral ao seu arquivo register-sw.js:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Adicionar um código de geração de registros do service worker
Seu arquivo service-worker.js é onde toda a lógica para a implementação do service worker
normalmente iria. Você usaria uma combinação de
eventos de ciclo de vida
do service worker,
a
API Cache Storage
e conhecimento sobre o tráfego de rede do seu app da Web para criar um service worker
perfeitamente, pronto para lidar com todas as solicitações do seu app da Web.
Mas isso é tudo para aprender depois. Neste estágio, o foco é observar vários eventos de service worker e se familiarizar com o uso do DevTools do Chrome para depurar o estado do seu service worker.
Para isso, adicione o seguinte código a service-worker.js, que registrará
mensagens no console do DevTools em resposta a vários eventos (mas não fará muito
mais):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
Conhecer o painel Service Workers no DevTools
Agora que você adicionou o código aos arquivos register-sw.js e service-worker.js,
é hora de acessar a versão ativa do seu projeto de amostra e observar
o service worker em ação.
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen
. - Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Console.
Você verá algo parecido com as seguintes mensagens de registro, mostrando que o service worker foi instalado e ativado:
Em seguida, acesse a guia Aplicativos e selecione o painel Service Workers. Será exibido um resultado parecido com este:
Isso permite que você saiba que há um service worker com um URL de origem de
service-worker.js para o app da Web solar-donkey.glitch.me, que está ativado e
em execução no momento. Ele também informa que há um cliente (guia
aberta) controlado pelo service worker.
Use os links nesse painel, como Unregister ou stop, para fazer
mudanças no service worker registrado no momento para fins de depuração.
Acione o fluxo de atualização do service worker
Um dos principais conceitos que você precisa entender ao desenvolver com service workers é a ideia de um fluxo de atualização.
Depois que seus usuários acessarem um app da Web que registra um service worker, eles acabarão
com o código da cópia atual do service-worker.js instalada no
navegador local. Mas o que acontece quando você faz atualizações na versão do service-worker.js que está armazenada no seu servidor da Web?
Quando um visitante recorrente retorna a um URL que está no escopo de um service worker,
o navegador solicita automaticamente o service-worker.js mais recente e
verifica se há alterações. Se algo no script do service worker for diferente,
o novo service worker terá a chance de instalar, ativar
e, eventualmente, assumir o controle.
Para simular esse fluxo de atualização, volte ao editor de código do projeto e faça qualquer alteração no código. Uma mudança rápida é substituir
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
com
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
Depois de fazer essa mudança, retorne à versão ativa do app de exemplo e recarregue a página com a guia "Application" do DevTools ainda aberta. Você verá algo parecido com o seguinte:
Isso mostra que há duas versões do service worker instaladas neste
momento. A versão anterior, que já estava ativada, está em execução e controla a página atual. A versão atualizada do service worker está listada abaixo. Ele está no
estado waiting
e continuará aguardando até que todas as guias abertas controladas pelo
antigo service worker sejam fechadas.
Esse comportamento padrão garante que, se o novo
service worker tiver uma diferença fundamental de comportamento em relação ao antigo, como um
gerenciador fetch que responde com recursos incompatíveis com versões mais antigas
do seu app da Web, ele não vai entrar em vigor até que um usuário encerre todas
as instâncias anteriores dele.
Resumindo
Agora você precisa se familiarizar com o processo de registro de um service worker e de observar o comportamento dele usando o DevTools do Chrome.
Agora você está em uma boa posição para começar a implementar estratégias de armazenamento em cache e tudo o que pode ajudar seu app da Web a carregar de maneira confiável e rápida.