Conheça os recursos do Workbox

O Workbox é flexível o suficiente para acomodar praticamente qualquer processo de build de projeto. Isso significa que há mais de uma maneira de usar o Workbox, permitindo que você escolha a integração certa para seu projeto. Independentemente de como você se integra ao Workbox, as várias ferramentas oferecem uma API semelhante.

generateSW x injectManifest

Você vai usar um dos dois métodos principais das ferramentas de build do Workbox: generateSW ou injectManifest. Qual delas você deve usar depende de quanta flexibilidade você precisa. O generateSW prioriza a facilidade de uso e a simplicidade em detrimento da flexibilidade, permitindo que você declare um conjunto de opções de configuração e oferecendo um service worker totalmente funcional.

O injectManifest favorece uma maior flexibilidade, mas com um pouco de simplicidade, já que você vai acabar escrevendo o código para o service worker por conta própria. Já o injectManifest fornece um manifesto de pré-cache que pode ser usado pelos métodos de pré-armazenamento em cache do Workbox.

Quando usar generateSW

Use generateSW se:

  • Você quer pré-armazenar em cache arquivos associados ao seu processo de build, incluindo arquivos com URLs que talvez você não saiba com antecedência.
  • Você tem necessidades simples de armazenamento em cache durante a execução que podem ser configuradas nas opções do generateSW.

Quando não usar generateSW

Por outro lado, não use generateSW se:

  • Você quer usar outros recursos do service worker (como Push na Web).
  • Você precisa de mais flexibilidade para importar scripts adicionais ou usar módulos específicos da caixa de trabalho para ajustar o service worker às necessidades do seu aplicativo.

Quando usar injectManifest

Use injectManifest se:

  • Você quer pré-armazenar arquivos em cache, mas quer escrever seu próprio service worker.
  • Você tem necessidades complexas de armazenamento em cache ou roteamento que não podem ser expressas pelas opções de configuração do generateSW
  • Gostaria de usar outras APIs em seu service worker (como Web Push).

injectManifest é diferente de generateSW, porque exige que você especifique um arquivo do service worker de origem. Nesse fluxo de trabalho, o arquivo do service worker de origem precisa ter uma string self.__WB_MANIFEST especial para que injectManifest possa substituí-lo pelo manifesto de pré-cache.

Quando não usar injectManifest

Não use injectManifest se:

  • Você não quer usar o pré-armazenamento em cache no seu service worker.
  • nossos requisitos de service worker são simples o suficiente para serem cobertos pelo que generateSW e suas opções de configuração podem oferecer.
  • Você prioriza a facilidade de uso em vez da flexibilidade.

Usar as ferramentas de build do Workbox

Se você está procurando uma maneira independente de framework de usar o Workbox no processo de build, há três opções:

  1. workbox-cli
  2. workbox-build ferramenta de linha de comando.
  3. Como usar um bundler (como workbox-webpack-plugin).

Cada uma dessas ferramentas de build oferece os modos generateSW e injectManifest, com um conjunto semelhante de opções. Essas são boas opções quando você não quer vincular o service worker com tecnologia do Workbox a uma estrutura específica. Para saber qual é a melhor opção, vamos analisar cada uma rapidamente.

workbox-cli

Se você está procurando a menor barreira possível para entrar com o Workbox, a CLI é para você:

npm install workbox-cli --save-dev

Para começar a usar a CLI, execute o assistente com npx workbox wizard. O assistente fará algumas perguntas, e as respostas serão usadas para configurar um projeto com um arquivo workbox-config.js, que você pode personalizar de acordo com suas necessidades. Ela será semelhante a esta:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Depois que o arquivo de configuração for criado, a CLI poderá executar os métodos generateSW ou injectManifest. O texto de ajuda da CLI tem mais informações e exemplos de uso.

workbox-build

O workbox-cli é um wrapper em torno do módulo workbox-build. Uma alternativa é usar workbox-build diretamente. Ao usar workbox-build, em vez de especificar opções com um arquivo workbox-config.js, você usará os métodos generateSW ou injectManifest diretamente como parte de um script do nó, transmitindo um conjunto semelhante de opções:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

No exemplo acima, workbox-build gravará o service worker gerado no diretório dist quando o comando node build-sw.mjs for executado.

Como usar um bundler

Vários bundlers têm os próprios plug-ins do Workbox, mas o único bundler oficialmente aceito pela equipe do Workbox é o webpack, via workbox-webpack-plugin. Assim como workbox-cli e workbox-build, workbox-webpack-plugin executará os métodos generateSW ou injectManifest, mas o plug-in coloca esses nomes de método em maiúscula como GenerateSW ou InjectManifest. Caso contrário, o uso será semelhante a workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

As opções transmitidas para GenerateSW ou InjectManifest não são iguais a generateSW ou injectManifest, mas há uma sobreposição significativa. Em particular, nem é possível especificar uma opção globDirectory para GenerateSW, porque o webpack já sabe onde os recursos de produção estão agrupados.

Usar um framework

Tudo o que foi abordado neste ponto foca no uso do Workbox, independentemente das preferências de estrutura de trabalho. No entanto, é possível usar o Workbox em um framework específico se isso facilitar o desenvolvimento. Por exemplo, create-react-app é enviado com a caixa de trabalho por padrão. Diferentes integrações de framework com o Workbox são abordadas mais tarde em um artigo posterior.

Essas integrações específicas do framework do Workbox podem restringir sua capacidade de configurar o Workbox da maneira que você quiser. Em casos como esses, você sempre pode recorrer aos métodos discutidos aqui.

E se eu não tiver um processo de criação?

Este documento pressupõe que seu projeto tem um processo de compilação, mas seu projeto, na verdade, pode não ter. Se isso descreve sua situação, ainda é possível usar o Workbox com o módulo workbox-sw. Com o workbox-sw, é possível carregar o ambiente de execução do Workbox usando uma CDN ou localmente e compor seu próprio service worker.

Conclusão

A flexibilidade da caixa de trabalho garante que ela possa ser usada em praticamente qualquer projeto, independentemente das preferências da estrutura ou do conjunto de ferramentas. Todos esses caminhos permitirão realizar o pré-armazenamento em cache e o armazenamento em cache do ambiente de execução usando alguns métodos, além de mais flexibilidade para criar service workers com recursos mais avançados, quando necessário.