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.
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.
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. 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
.
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.