Progressive Web Apps: trabalhando com o Workbox

1. Olá!

Neste laboratório, você vai pegar um site com um service worker e convertê-lo para usar o Workbox. Este é o segundo de uma série de codelabs complementares para o workshop de Progressive Web Apps. O codelab anterior foi Como ficar off-line. Há mais seis codelabs nesta série.

O que você vai aprender

  • Converter um service worker atual para usar o Workbox
  • Adicionar um substituto off-line a um PWA

O que você precisa saber

  • HTML e JavaScript básicos

O que é necessário

2. Começar a configuração

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

Se você clonar o repositório, verifique se está na ramificação pwa03--workbox. 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

  • service-worker.js: arquivo do service worker do aplicativo.
  • offline.html: HTML off-line para usar quando uma página não está disponível.

3. Migrar para o Workbox

Analisando o service worker atual, o pré-cache parece poder ser dividido em duas etapas:

  • Armazenar em cache arquivos relevantes durante a instalação do service worker
  • Sirva esses arquivos novamente com uma estratégia "Somente cache"

O arquivo index.html e a rota / ainda fazem sentido para pré-armazenamento em cache, já que o HTML desse app da Web não vai mudar muito. No entanto, os outros arquivos, como CSS e JavaScript, podem mudar, e não queremos precisar passar por todo o ciclo de vida do service worker sempre que isso acontecer. Além disso, o service worker atual só considera um subconjunto do nosso CSS e JavaScript, e queremos que tudo seja coberto. Armazenar esses itens em cache com uma estratégia de atualização em segundo plano faz mais sentido: resposta rápida que pode ser atualizada em segundo plano conforme necessário.

Pré-cache revisitado

Ao migrar para o Workbox, não precisamos manter nenhum código existente. Portanto, exclua tudo em service-worker.js. No laboratório anterior, configuramos esse service worker para ser compilado. Assim, podemos usar importações de ESModule aqui para trazer o Workbox dos módulos NPM. Vamos começar revisando o pré-cache. Em service-worker.js, adicione o seguinte código:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

Explicação

Para configurar o pré-cache para /index.html e /, há cinco módulos para extrair. Embora pareça muito, esse código é muito mais eficiente do que o anterior.

Ela começa configurando uma nova estratégia de cache "Cache First", escolhida em vez de "Cache Only" para permitir que outras páginas sejam adicionadas ao cache conforme necessário. Ele recebe um nome, page-cache. As estratégias do Workbox podem usar vários plug-ins que afetam o ciclo de vida de salvar e recuperar conteúdo do cache. Aqui, dois plug-ins, o Cacheable Response e o Expiration, são usados para garantir que apenas boas respostas do servidor sejam armazenadas em cache e que cada item no cache seja liberado após 30 dias.

Em seguida, o cache da estratégia é aquecido com /index.html e / usando a receita do Workbox para aquecer o cache da estratégia. Isso vai adicionar esses itens ao cache durante o evento de instalação do service worker.

Por fim, uma nova rota é registrada. Qualquer solicitação que seja uma navegação de página será gerenciada por essa estratégia, extraindo do cache ou da rede e armazenando em cache a resposta.

Como armazenar recursos em cache

Com o pré-armazenamento em cache de rotas resolvido, é hora de reimplementar o armazenamento em cache para os recursos do site: CSS e JavaScript. Para fazer isso, primeiro adicione StaleWhileRevalidate à sua importação workbox-strategies e, em seguida, adicione o seguinte código à parte de baixo do service worker:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

Explicação

Essa rota começa determinando se o tipo de solicitação é um estilo, um script ou um worker, correspondendo a CSS, JavaScript ou Web Workers. Se for, ele usa uma estratégia de validação em segundo plano enquanto o conteúdo está desatualizado, tentando veicular primeiro do cache e voltando para a rede se não estiver disponível, enquanto tenta atualizar a versão no cache da rede, se possível. Assim como a estratégia de página, essa estratégia armazena em cache apenas respostas boas.

4. Adicionar substituto off-line

Com o service worker original migrado para o Workbox, há mais uma coisa que precisa ser feita para evitar que o PWA falhe quando estiver off-line: adicionar um substituto off-line.

Os substitutos off-line podem ser definidos para qualquer coisa que não esteja disponível quando você estiver off-line: páginas, fontes, CSS, JavaScript, imagens etc. No mínimo, um substituto de página precisa ser definido para todos os PWAs. Assim, se um usuário navegar até uma página que não está no cache, ele vai permanecer no contexto do seu app.

As receitas do Workbox oferecem um fallback off-line que pode ser usado para isso. Para usar, primeiro adicione offlineFallback à importação workbox-recipes e, em seguida, adicione o código a seguir à parte de baixo do service worker:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

Explicação

O roteiro de substituição off-line configura uma estratégia "Somente cache" que é aquecida com as substituições fornecidas. Em seguida, ele configura um gerenciador de captura padrão do Workbox, capturando todas as solicitações de roteamento com falha (se não houver nada no cache e algo não puder ser acessado na rede), extraindo o conteúdo dos arquivos relevantes do cache e retornando-o como conteúdo enquanto a solicitação continuar falhando.

5. Parabéns!

Você aprendeu a usar o Workbox para configurar estratégias de cache para rotas e fornecer substitutos off-line para seu PWA.

O próximo codelab da série é IndexedDB.