Duas APIs desempenham um papel crucial na criação de apps da Web confiáveis: Service Worker e Armazenamento em cache. Mas usando-os de forma eficaz, sem introduzir bugs sutis ou encostar nos recursos casos de uso diferentes, pode ser um desafio. Por exemplo, erros no código do service worker podem causar problemas de cache; os usuários podem receber conteúdo desatualizado ou links.
O Workbox é uma ferramenta kit de ferramentas do service worker criado com base no service worker e no armazenamento em cache APIs de terceiros. Ele fornece um conjunto de bibliotecas pronto para produção para adicionar suporte off-line a e apps da Web. O kit de ferramentas é estruturado em duas coleções: ferramentas que ajudam a gerenciar o código executado no seu service worker e as ferramentas que se integram o processo de build.
Código do ambiente de execução
É o código executado dentro do script do seu service worker e controla como ele intercepta solicitações enviadas e interage com a API Cache Storage. A caixa de trabalho tem de vários módulos de biblioteca no total, que lidam com uma variedade de casos de uso especializados. Os módulos mais importantes determinar se o service worker responderá (conhecido como roteamento), e como ele vai responder (conhecido como estratégia de armazenamento em cache).
Integração do build
Ofertas do Workbox linha de comando, Módulo Node.js, e Plug-in do webpack ferramentas que oferecem maneiras alternativas de realizar duas coisas:
- Criar um script de service worker com base em um conjunto de configurações . 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ê configurou.
- Gere uma lista de URLs que devem ser "pré-armazenado", 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 seu service worker é opcional. Há vários de guias que explicam estratégias comuns de armazenamento em cache de "baunilha" do service worker. Se você decidir usar o Workbox, confira alguns dos benefícios.
Gerenciamento de cache
A caixa de trabalho processa as atualizações de cache para você, vinculadas ao processo de compilação na usando pré-armazenamento em cache ou políticas configuráveis de tamanho/idade durante o uso do ambiente de execução armazenamento em cache. A API Cache Storage subjacente é poderosa, mas não tem nenhuma suporte integrado para expiração do cache. Ferramentas como o Workbox preenchem essa lacuna.
Amplo registro e geração de relatórios de erros
Quando você está começando a usar service workers, descobrir por que algo
está sendo armazenado em cache (ou, igualmente frustrante, por que não são armazenados em cache) é um desafio.
O Workbox detecta automaticamente quando você está executando uma versão de desenvolvimento do seu
site em localhost e ativa a geração de registros de depuração no JavaScript do navegador
no console do Google Cloud.
Ao acompanhar as mensagens de registro, você pode chegar à raiz de qualquer de configuração ou invalidação muito mais rapidamente do que se ele sozinha.
Uma base de código testada entre navegadores
O Workbox foi desenvolvido com base em um pacote de testes para vários navegadores e, quando possível, volta automaticamente para implementações alternativas de recursos que estão não estão disponíveis em alguns navegadores.
- A
workbox-broadcast-cache-update moduleusa o API Broadcast Channel quando disponível, e usa um Baseado empostMessage()implementação em navegadores que não são compatíveis. - A módulo workbox-background-sync usa o API Background Sync Se possível, ou seja, repete-se dos eventos na fila sempre que o o service worker é iniciado.
Como usar o Workbox?
Integração do framework
Se você está começando um novo projeto do zero, pode aproveitar a Integração da caixa de trabalho encontrada em vários kits iniciais e plug-ins complementares:
- create-react-app
- vue-cli
- preact-cli (link em inglês)
- Gatsby
- Next.js
Adicionar o Workbox ao seu processo de build
Se você já tem um processo de criação para seu site, inserir o apropriado linha de comando, Módulo Node.js, ou Plug-in do webpack pode ser tudo de que você precisa para começar a usar o Workbox.
Em particular, a interface de linha de comando do Workbox facilita acessar e
em execução, com um modo wizard que vai verificar seu desenvolvimento local
ambiente de execução e sugerir uma configuração padrão razoável que você poderia 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 seu service worker, execute workbox generateSW workbox-config.js
como parte do processo de build. Consulte a documentação do generateSW para mais detalhes.
É possível personalizar ainda mais o service worker fazendo alterações 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
Se você já tem um service worker e quer testar o ambiente de execução do Workbox bibliotecas, importar o Workbox da CDN oficial e comece a usá-lo imediatamente para armazenamento em cache do ambiente de execução. Este uso nesse caso significa que não será possível aproveitar o pré-armazenamento em cache (que requer integração no tempo de build), mas é ótimo para prototipagem e testes 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',
})
);