Duas APIs desempenham um papel crucial na criação de apps da Web confiáveis: service worker e armazenamento em cache. No entanto, usá-los de maneira eficaz, sem introduzir bugs sutis ou esbarrar em casos extremos, pode ser um desafio. Por exemplo, erros no código do service worker podem causar problemas de armazenamento em cache. Os usuários podem receber conteúdo desatualizado ou links corrompidos.
O Workbox é um kit de ferramentas de service worker de alto nível criado com base no Service Worker e nas APIs 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 códigos executados dentro do service worker e ferramentas que se integram ao seu processo de compilação.
Código do ambiente de execução
Esse é o código executado dentro do script do service worker e controla como ele intercepta solicitações de saída e interage com a API Cache Storage. O Workbox tem mais de uma dúzia de módulos de biblioteca no total, cada um deles processa 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 responderá (conhecida como estratégia de armazenamento em cache).
Integração do build
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 em segundo plano para colocar em ação as estratégias de armazenamento em cache que você configura.
- Gere 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 compilação.
Por que usar o Workbox?
O uso do Workbox ao criar seu service worker é opcional. Há vários guias que explicam estratégias comuns de armazenamento em cache de uma perspectiva básica do service worker. Se você decidir usar o Workbox, aqui estão alguns dos benefícios.
Gerenciamento de cache
O Workbox processa atualizações de cache para você, sejam vinculadas ao processo de build ao usar o pré-armazenamento em cache ou usando políticas configuráveis de tamanho/idade ao usar o armazenamento em cache. A API Cache Storage subjacente é eficiente, mas não tem suporte integrado para expiração do cache. Ferramentas como o Workbox preenchem essa lacuna.
Geração de registros abrangente e relatórios de erros
Quando você está começando a usar os service workers, é difícil descobrir por que algo
está sendo armazenado em cache (ou, igualmente frustrante, por que não está armazenado em cache).
A caixa de trabalho detecta automaticamente quando você está executando uma versão de desenvolvimento do
site em localhost e ativa a geração de registros 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 em um pacote de testes entre navegadores e, quando possível, retorna automaticamente a implementações alternativas de recursos que não estão em alguns navegadores.
- O
workbox-broadcast-cache-update moduleusa a API Broadcast Channel quando disponível e recorre a uma implementação baseada empostMessage()em navegadores que não têm suporte. - O módulo de sincronização em segundo plano da caixa de trabalho usa a API Background Sync se possível. Caso contrário, ele volta a repetir eventos na fila toda vez que o service worker é iniciado.
Como usar o Workbox?
Integração do framework
Se você está iniciando um novo projeto do zero, aproveite a integração do Workbox presente em muitos kits iniciais e plug-ins de complementos conhecidos:
- criar-react-app
- vue-cli
- preact-cli
- Gatsby (em inglês)
- Next.js
Adicionar o Workbox ao processo de build atual
Se você já tiver um processo de build para o site, basta adicionar a linha de comando adequada, o módulo Node.js ou a ferramenta de plug-in webpack (links em inglês) para começar a usar o Workbox.
Mais especificamente, a interface de linha de comando do Workbox facilita a
execução e execução, com um modo wizard que verifica seu ambiente de desenvolvimento
local e sugere uma configuração padrão razoável que pode ser usada
no futuro:
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 mais detalhes.
É possível personalizar ainda mais seu service worker fazendo alterações em workbox-config.js.
Consulte a documentação das opções para ver mais detalhes.
Usar o Workbox no ambiente de execução em um service worker
Se você já tem um service worker e quer testar as bibliotecas de ambiente de execução do Workbox, importe o Workbox da CDN oficial e comece a usá-lo para o armazenamento em cache do 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 tempo de build), mas é ótimo para prototipar e testar diferentes estratégias de armazenamento em cache imediatamente.
// 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',
})
);