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.

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.

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

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.

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.