Duas APIs desempenham um papel crucial na criação de apps da Web confiáveis: Service Worker e Cache Storage. No entanto, usá-los de maneira eficaz, sem introduzir bugs sutis ou se deparar com casos limite, pode ser um desafio. Por exemplo, erros no código do service worker podem causar problemas de armazenamento em cache. Os usuários podem ver conteúdo desatualizado ou links corrompidos.
O Workbox é um kit de ferramentas de service worker de alto nível criado com base nas APIs Service Worker e Cache Storage. Ele fornece um conjunto de bibliotecas prontas para produção para adicionar suporte off-line a apps da Web. O kit de ferramentas é estruturado em duas coleções: ferramentas que ajudam a gerenciar o código executado no service worker e ferramentas que se integram ao processo de build.
Código do ambiente de execução
Esse é o código executado no script do service worker e que controla como ele intercepta as solicitações de saída e interage com a API Cache Storage. O Workbox tem cerca de uma dúzia de módulos de biblioteca no total, cada um lidando com uma variedade de casos de uso especializados. Os módulos mais importantes determinam se o service worker vai responder (conhecido como roteamento) e como ele vai responder (conhecido como estratégia de armazenamento em cache).
Criar integração
O Workbox oferece ferramentas de linha de comando, módulo Node.js e plug-in webpack que oferecem maneiras alternativas de realizar duas coisas:
- Crie um script de service worker com base em um conjunto de opções de configuração. O service worker gerado usa as bibliotecas de ambiente de execução do Workbox "nos bastidores" para colocar em prática as estratégias de armazenamento em cache que você configurar.
- Gera uma lista de URLs que precisam ser "armazenados em cache" com base em padrões configuráveis para incluir e excluir arquivos gerados durante o processo de build.
Por que usar o Workbox?
O uso do Workbox ao criar o service worker é opcional. Há vários guias que explicam as estratégias comuns de armazenamento em cache da perspectiva de um service worker "vanilla". Se você decidir usar o Workbox, confira alguns dos benefícios dele.
Gerenciamento de cache
O Workbox lida com as atualizações de cache para você, seja vinculado ao processo de build ao usar o pré-armazenamento em cache ou por políticas de tamanho/idade configuráveis ao usar o armazenamento em cache no ambiente de execução. A API Storage de cache subjacente é poderosa, mas não tem suporte integrado para expiração de cache. Ferramentas como o Workbox preenchem essa lacuna.
Geração de registros e relatórios de erros abrangentes
Ao começar a usar service workers, descobrir por que algo
está sendo armazenado em cache (ou, igualmente frustrante, por que não está) é um desafio.
O Workbox detecta automaticamente quando você está executando uma versão de desenvolvimento do seu
site em localhost e ativa o registro de depuração no console JavaScript
do navegador.
Ao acompanhar as mensagens de registro, você pode chegar à raiz de qualquer problema de configuração ou invalidação muito mais rapidamente do que se estivesse sozinho.
Uma base de código testada em vários navegadores
O Workbox é desenvolvido com base em um pacote de testes para vários navegadores e, quando possível, recorre automaticamente a implementações alternativas de recursos que estão ausentes em determinados navegadores.
- O
workbox-broadcast-cache-update moduleusa a Broadcast Channel API, quando disponível, e volta para uma implementação baseada empostMessage()em navegadores sem suporte. - O módulo workbox-background-sync usa a API Background Sync, se possível. Caso contrário, ele tenta novamente os eventos em fila sempre que o service worker é iniciado.
Como usar o Workbox?
Integração de framework
Se você estiver começando um novo projeto do zero, aproveite a integração do Workbox encontrada em muitos kits iniciais e plug-ins complementares conhecidos:
- create-react-app
- vue-cli (link em inglês)
- preact-cli
- Gatsby
- Next.js
Adicionar o Workbox ao seu processo de build atual
Se você já tiver um processo de build para seu site, basta usar a ferramenta apropriada: linha de comando, módulo Node.js ou plug-in webpack. Isso pode ser tudo o que você precisa para começar a usar o Workbox.
Em particular, a interface de linha de comando do Workbox facilita a inicialização e
a execução, com um modo wizard que verifica seu ambiente de desenvolvimento
local e sugere uma configuração padrão razoável que você pode usar
daqui para frente:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
Para criar o service worker, execute workbox generateSW workbox-config.js
como parte de um processo de build. Consulte a documentação do generateSW para saber mais.
É possível personalizar ainda mais o service worker fazendo mudanças em workbox-config.js.
Consulte a documentação das opções para mais detalhes.
Usar o Workbox no ambiente de execução em um service worker atual
Se você já tiver um service worker e quiser testar as bibliotecas de ambiente de execução do Workbox, importe o Workbox da CDN oficial e comece a usá-lo para armazenamento em cache de ambiente de execução imediatamente. Esse caso de uso significa que você não poderá aproveitar o pré-armazenamento em cache (que requer integração no momento da criação), mas é ótimo para prototipagem e teste de diferentes estratégias de armazenamento em cache em tempo real.
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);