Pré-armazenamento em cache com o Workbox

O pré-armazenamento em cache é uma das coisas mais comuns que você vai fazer em um service worker, e o Workbox oferece muita flexibilidade para realizar essa tarefa importante, independente de qual das ferramentas de build do Workbox você escolher. Neste guia, você vai aprender a 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. O que é importante lembrar sobre o generateSW é que você não está criando seu próprio service worker, apenas solicitando que o Workbox o gere. No entanto, é possível influenciar o comportamento dele usando várias opções de configuração.

Por padrão, o generateSW faz coisas diferentes dependendo da ferramenta de build que você usa. Ao usar workbox-webpack-plugin, não é necessário especificar opções de configuração. Por padrão, o plug-in vai pré-armazenar em cache tudo o que o webpack inclui no gráfico de dependência e 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, por padrão, somente os recursos HTML, CSS e JavaScript lidos no sistema de arquivos local serão armazenados em cache. Em relação à configuração, é necessário especificar swDest e a opção globDirectory na configuração de generateSW para que o armazenamento em cache funcione. É provável que você também queira configurar outras opções que afetam o comportamento do service worker, então dê uma olhada na documentação.

Aviso:se muitos recursos no projeto estiverem pré-armazenados em cache com as configurações padrão, use uma das opções 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 armazenados em pré-cache, já que a configuração é diferente de generateSW.

Pré-armazenamento em cache com injectManifest

Usar o injectManifest não é tão fácil quanto usar o generateSW, mas você está trocando a facilidade de uso por uma maior flexibilidade. Em que generateSW processa toda a geração do service worker, injectManifest usa um service worker como origem e injeta uma lista de URLs para pré-armazenar em cache, deixando o restante do 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 do 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 de 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. Veja 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'
  ]
});

O service worker pode ser criado na linha de comando com o 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 você só precisa de 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'
  ]
});

O injectManifest é preferível caso você tenha requisitos complexos, como roteamento avançado, estratégias personalizadas de armazenamento em cache ou outros itens não cobertos pelas opções oferecidas pela generateSW.

Cuidado:os exemplos acima presumem que você está em um ambiente de nó 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 armazenamento em cache por conta própria, principalmente quando se trata de recursos com controle de versões compilados por bundlers. No entanto, o pré-armazenamento em cache não é a única coisa que você provavelmente vai fazer em um service worker. À medida que continuar, você aprenderá outras técnicas, como armazenamento em cache no tempo de execução.