workbox-cli

A interface de linha de comando do Workbox (contida na workbox-cli) consiste em um programa Node.js chamado caixa de trabalho que pode ser executado em uma linha de comando compatível com UNIX usando Windows, macOS de nuvem. Nos bastidores, workbox-cli envolve o módulo workbox-build, e fornece uma maneira fácil de integrar o Workbox em um build de linha de comando com configurações flexíveis.

Instalar a CLI

Para instalar a CLI com o Node, execute o seguinte comando no seu terminal:

npm install workbox-cli --global

Modos da CLI

A CLI tem quatro modos diferentes:

  • wizard: um guia explicativo para configurar o Workbox no seu projeto.
  • generateSW: gera um service worker completo para você.
  • injectManifest: injeta os recursos que serão pré-armazenados em cache no projeto.
  • copyLibraries: copie as bibliotecas de caixa de trabalho para um diretório.

wizard

O assistente da caixa de trabalho faz uma série de perguntas sobre seu diretório local configuração e quais arquivos você quer pré-armazenar em cache. Suas respostas são usadas para gerar um arquivo de configuração que pode ser usado ao executar no Modo generateSW.

A maioria dos desenvolvedores só precisa executar o assistente de caixa de trabalho uma vez, e você está livre para personalizar manualmente o arquivo de configuração inicial gerado, usando qualquer uma das opções de configuração de build com suporte.

Para iniciar o assistente, execute:

npx workbox-cli wizard

Captura de tela do assistente da CLI do Workbox

generateSW

Use a CLI do Workbox para gerar um service worker completo usando um arquivo de configuração (como o arquivo gerado pelo assistente).

Basta executar o seguinte comando:

npx workbox-cli generateSW path/to/config.js

Desenvolvedores satisfeitos com o armazenamento em cache integrado e o armazenamento em cache do ambiente de execução do Workbox e não precisam personalizar o comportamento dos service workers é recomendável usar o modo generateSW.

Quando usar generateSW

  • Você quer pré-armazenar os arquivos em cache.
  • Você tem necessidades simples de armazenamento em cache no ambiente de execução.

Quando NÃO usar generateSW

  • Você quer usar outros recursos do Service Worker (por exemplo, Push na Web).
  • Você quer importar outros scripts ou acrescentar lógica para estratégias personalizadas de armazenamento em cache.

injectManifest

Para desenvolvedores que querem ter mais controle sobre o arquivo final do service worker podem usar o modo injectManifest. Esse modo pressupõe que você tem um arquivo do service worker existente (cujo local é especificado em config.js).

Quando workbox injectManifest é executado, ele procura uma string específica (precacheAndRoute(self.__WB_MANIFEST) por padrão) na sua origem arquivo do service worker. Ela substitui a matriz vazia por uma lista de URLs para pré-armazenar em cache e gravar o arquivo do service worker no seu local de destino, com base nas opções de configuração do config.js. O restante do código no seu service worker de origem não é alterado.

Você pode usar o Workbox nesse modo da seguinte forma:

npx workbox-cli injectManifest path/to/config.js

Quando usar injectManifest

  • Você quer mais controle sobre seu service worker.
  • Você quer pré-armazenar os arquivos em cache.
  • Você precisa personalizar o roteamento e as estratégias.
  • você quiser usar seu service worker com outros recursos da plataforma (por exemplo, Web Push).

Quando NÃO usar injectManifest

  • Você quer o caminho mais fácil para adicionar um service worker ao seu site.

copyLibraries

Esse modo é útil se você quiser usar injectManifest e gostaria de usar os arquivos da biblioteca do Workbox hospedados na sua origem do uso da CDN.

Você só precisa executá-lo com um caminho para gravar os arquivos:

npx workbox-cli copyLibraries third_party/workbox/

Integração do processo de build

Por que o Workbox precisa se integrar ao meu processo de build?

O projeto Workbox contém várias bibliotecas que trabalham juntas para potencializar os recursos service worker. Para usar essas bibliotecas com eficiência, o Workbox precisa estar integrado ao seu processo de build de um app da Web. Isso garante que o service worker seja capaz de pré-armazenar em cache com eficiência todo o conteúdo essencial do seu app da Web e manter isso sempre atualizado.

workbox-cli é a escolha certa para meu processo de build?

Se você já tem um processo de build baseado inteiramente em scripts de npm (em inglês) workbox-cli é uma boa escolha.

Se você estiver usando webpack como seu build no momento e use o workbox-webback-plugin. é uma escolha melhor.

Se você usa o Gulp atualmente, Grunt ou alguma outra ferramenta de build baseada em Node.js, Depois, integrar workbox-build ao script de build é uma escolha melhor.

Se você não tem um processo de build, crie um antes de usar o Workbox para pré-armazenar em cache qualquer um dos seus recursos. Tentando executar o workbox-cli manualmente pode ser suscetível a erros e esquecer para executá-lo poderá levar à exibição de conteúdo desatualizado para os visitantes recorrentes.

Configuração

Depois de instalar workbox-cli como um desenvolvimento dependência do seu projeto local, é possível adicionar a chamada para workbox em ao fim do script npm do seu processo de build:

No package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

Substitua <mode> por generateSW ou injectManifest (dependendo no seu caso de uso) e <path/to/config.js> pelo caminho suas opções de configuração. Sua configuração pode ter sido criada automaticamente por workbox wizard ou ajustado manualmente.

Configuração

Opções usadas por generateSW

Um conjunto completo de opções de configuração pode ser encontrado na documentação de referência.

Opções usadas por injectManifest

Um conjunto completo de opções de configuração pode ser encontrado na documentação de referência.