Pré-armazenamento em cache com o Workbox

O pré-armazenamento em cache é uma das tarefas mais comuns de um service worker. O Workbox oferece muita flexibilidade para você realizar essa tarefa importante, independente da ferramenta de build do Workbox escolhida. Neste guia, você vai aprender a pré-armazenar recursos em cache usando generateSW e injectManifest, além de qual desses métodos pode ser mais adequado para seu projeto.

Pré-armazenamento em cache com generateSW

O generateSW é a maneira mais fácil de pré-armazenar recursos em cache no Workbox. É importante lembrar de generateSW que você não está criando seu próprio service worker, mas sim pedindo para que o Workbox gere um para você. No entanto, é possível influenciar o comportamento dele por meio de várias opções de configuração.

Por padrão, generateSW faz coisas diferentes, dependendo da ferramenta de build que você usa. Ao usar workbox-webpack-plugin, você não precisa especificar nenhuma opção de configuração. Por padrão, o plug-in pré-armazenará em cache tudo o que o webpack inclui no gráfico de dependência dele e vai gravar um service worker chamado service-worker.js no diretório especificado por output.path.

Por outro lado, se você usar workbox-build ou workbox-cli, somente os recursos HTML, CSS e JavaScript lidos no sistema de arquivos local serão armazenados em cache por padrão. Quanto à configuração, é necessário especificar swDest e a opção globDirectory na configuração generateSW para que o pré-armazenamento em cache funcione. É provável que você também queira configurar outras opções que afetam o comportamento do seu service worker, então dê uma olhada na documentação.

Aviso:se muitos recursos no projeto forem pré-armazenados em cache com as configurações padrão, use uma das opções do glob para excluir recursos na configuração generateSW. Ao usar workbox-webpack-plugin, consulte a documentação GenerateSW do plug-in para saber como evitar que recursos indesejados sejam pré-armazenados em cache, já que a configuração é diferente de generateSW.

Pré-armazenamento em cache com injectManifest

Usar injectManifest não é tão fácil quanto usar generateSW, mas você está trocando a facilidade de uso por uma maior flexibilidade. Enquanto generateSW processa toda a geração do service worker para você, o injectManifest usa um service worker que você escreve como origem e injeta uma lista de URLs para armazenar em cache, deixando o restante do seu service worker como está.

Ao usar injectManifest, você é responsável por conectar a lógica de pré-armazenamento em cache. Quando injectManifest examina seu service worker de entrada, ele procura uma variável self.__WB_MANIFEST especial e a substitui pelo manifesto de pré-cache. Se essa variável não estiver presente, injectManifest vai gerar um erro.

Observação:se você precisar mudar a string que injectManifest procura para algo diferente de self.__WB_MANIFEST, especifique a opção injectionPoint na configuração.

A lista de entradas no manifesto de pré-cache pode ser ajustada com outras opções de configuração.

Cuidado:diferentemente de generateSW, o injectManifest não agrupa automaticamente o ambiente de execução do Workbox para você. Para saber como gerenciar isso em casos de uso que dependem do injectManifest, confira a comparação lado a lado abaixo.

Comparação lado a lado

Clique em cada uma das guias abaixo para comparar o uso dos métodos generateSW e injectManifest:

Como generateSW gera um service worker, você só precisa especificar uma configuração. Confira abaixo um exemplo usando workbox-build:

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

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

Assim, o service worker pode ser criado na linha de comando com Node:

node build-sw.js

Como injectManifest requer um service worker de origem, um exemplo minimamente viável requer um arquivo de service worker de origem. Se só é necessário fazer o pré-armazenamento em cache, o service worker de entrada pode ter esta aparência:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Observe a string self.__WB_MANIFEST. Este é um marcador de posição que o Workbox substitui pelo manifesto de pré-cache. Confira abaixo uma configuração válida para este caso de uso:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

É preferível usar injectManifest se você tiver requisitos complexos, como roteamento avançado, estratégias personalizadas de armazenamento em cache ou outros itens que não são cobertos pelas opções fornecidas pelo generateSW.

Cuidado:os exemplos acima pressupõem que você está em um ambiente Node com suporte nativo a módulos ES sem uma etapa de build. Em versões do nó anteriores à 16, talvez seja necessário definir uma sinalização para ativar o suporte ao módulo ES ou confiar na semântica CommonJS usando module.exports.

Conclusão

O pré-armazenamento em cache no Workbox é muito mais simples do que se você tivesse que gerenciar o pré-armazenamento em cache por conta própria, especialmente no caso de recursos com controle de versão compilados por bundlers. No entanto, o pré-armazenamento em cache não é a única coisa que você provavelmente fará em um service worker. À medida que continuar, você vai aprender outras técnicas, como armazenamento em cache em tempo de execução.