Progressive Web Apps: inclusões de service worker

1. Olá!

Neste laboratório, você vai pegar um aplicativo da Web e adicionar uma resposta de rota de streaming para melhorar o desempenho. Este é o sétimo de uma série de codelabs complementares para o workshop de Progressive Web Apps. O codelab anterior foi Como potencializar seu PWA. Há mais um codelab nesta série.

O que você vai aprender

• Adicionar uma resposta de streaming a um service worker

O que você precisa saber

• JavaScript

O que é necessário

• Um navegador compatível com Service Workers e Streams

2. Começar a configuração

Comece clonando ou fazendo o download do código inicial necessário para concluir este codelab:

Clonar o repositório

Fazer o download do ZIP

Se você clonar o repositório, verifique se está na ramificação pwa06--service-worker-includes. O arquivo zip também contém o código dessa ramificação.

Essa base de código exige o Node.js 14 ou versões mais recentes. Quando o código estiver disponível, execute npm ci na linha de comando da pasta do código para instalar todas as dependências necessárias. Em seguida, execute npm start para iniciar o servidor de desenvolvimento do codelab.

O arquivo README.md do código-fonte explica todos os arquivos distribuídos. Além disso, estes são os principais arquivos com que você vai trabalhar ao longo deste codelab:

Arquivos de chave

• js/preview.js: prévia do arquivo JavaScript da página
• service-worker.js: arquivo service worker do PWA

3. Prévia de streaming

A página de prévia pode ser dividida em três partes claras: o cabeçalho, o corpo compilado e o rodapé. No momento, o corpo compilado está sendo renderizado do lado do cliente, mas não há motivo para isso. Vamos movê-lo para o service worker.

Para compilar o corpo, há uma pesquisa de conteúdo assíncrona. Como o trabalho assíncrono em uma resposta de navegação é caro, é uma ótima oportunidade de transmitir o conteúdo conhecido primeiro para o navegador.

Para isso, primeiro limpe o conteúdo em js/preview.js para garantir que ele não esteja mais fazendo a compilação. Em seguida, em service-worker.js, faça o seguinte:

• Importe a exportação nomeada strategy de workbox-streams como streamsStrategy
• Importe a exportação nomeada openDB de idb e a exportação nomeada marked de marked.
• Antes do registro de rota para navegações, adicione um novo registro de rota
  • Ele precisa verificar se o pathname do URL é /preview.
  • Ele precisa usar uma estratégia de streaming que
    1. Responder com o conteúdo de preview/index.html pela área de conteúdo da tag main
    2. Responda com uma função que abre o IndexedDB settings-store, extrai o conteúdo do armazenamento de objetos settings e retorna a versão renderizada em Markdown desse conteúdo.
    3. Responda com as tags de fechamento main, body e html.

Coloque o registro da rota de streaming antes do registro de navegação regular. Os registros de rota são executados na ordem em que são incluídos no service worker. Portanto, se você fizer o contrário, o streaming nunca será executado porque a solicitação já terá sido processada.

Com a resposta de streaming no lugar, volte e abra a prévia do site no navegador. O conteúdo da página agora está sendo renderizado diretamente do service worker. Nenhum código do lado do cliente é necessário.

Se as mudanças não aparecerem, verifique se o novo service worker está sendo usado na página. Para isso, confira o service worker ativo na guia Service Workers do painel Applications no Chrome DevTools.

4. Parabéns!

Você aprendeu a colocar seu web app off-line usando service workers e a API Cache Storage.

O próximo codelab da série é Como trabalhar com workers.