Um recurso dos service workers é a capacidade de salvar arquivos no cache quando o service worker está sendo instalado. Isso é chamado de "precaching". O pré-armazenamento em cache permite disponibilizar arquivos em cache para o navegador sem acessar a rede. Use o pré-armazenamento em cache para recursos essenciais que seu site precisa, mesmo quando estiver off-line: página principal, estilos, imagem substituta e scripts essenciais.
Por que usar o Workbox?
O uso do Workbox para pré-armazenamento em cache é opcional. Você pode escrever seu próprio código para armazenar em cache recursos essenciais quando o service worker estiver sendo instalado. O principal benefício de usar o Workbox é o controle de versões pronto para uso. Você terá muito menos problemas para atualizar recursos pré-armazenados em cache usando o Workbox do que se tivesse que gerenciar o controle de versões e atualizar esses arquivos por conta própria.
Manifestos do pré-cache
O pré-armazenamento em cache é orientado por uma lista de URLs e informações de controle de versão associadas para cada URL. Juntas, essas informações são conhecidas como um manifesto de pré-cache. O manifesto é a "fonte da verdade" para o estado de tudo que precisa estar no pré-cache de uma determinada versão de um app da Web. Um manifesto de pré-cache, no formato usado pelo Workbox, tem uma aparência semelhante a esta:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Quando o service worker é instalado, três entradas de cache são criadas no
armazenamento em cache para cada um dos três URLs listados. O primeiro recurso tem informações de controle
de versão já incluídas no URL (app é o nome real do arquivo e
.abcd1234 contém as informações de controle de versão, logo antes da extensão de arquivo
.js). As ferramentas de build do Workbox podem detectar isso e excluir um campo de revisão. Os
outros dois recursos não incluem informações de controle de versões nos URLs. Portanto, as ferramentas de build
do Workbox criam um campo revision separado, contendo um hash do conteúdo
do arquivo local.
Como exibir recursos pré-armazenados em cache
Adicionar recursos ao cache é apenas uma parte da história de pré-armazenamento em cache. Quando os recursos são armazenados em cache, eles precisam responder às solicitações de saída. Isso requer um
listener de eventos fetch no service worker que possa verificar quais URLs foram
armazenados previamente em cache e retornar essas respostas armazenadas em cache de maneira confiável, ignorando a
rede no processo. Como o service worker verifica o cache em busca de respostas
(e as usa antes da rede), isso é chamado de
estratégia que prioriza o cache.
Atualizações eficientes
Um manifesto de pré-cache fornece uma representação exata do estado do cache esperado. Se uma combinação de URL/revisão no manifesto mudar, um service worker sabe que a entrada em cache anterior não é mais válida e precisa ser atualizada. É necessária apenas uma única solicitação de rede, feita automaticamente pelo navegador como parte da verificação de atualização do service worker, para determinar quais URLs pré-armazenados precisam ser atualizados.
Atualizações para recursos pré-armazenados em cache
À medida que você lança novas versões do seu app da Web ao longo do tempo, é necessário manter os URLs previamente armazenados em cache, pré-armazenar em cache novos recursos e excluir entradas desatualizadas. Desde que você continue gerando um manifesto completo de pré-cache toda vez que recriar seu site, esse manifesto servirá como a "fonte da verdade" para o estado de pré-cache a qualquer momento.
Se houver um URL existente com um novo campo de revisão ou se algum URL tiver sido
adicionado ou descartado do manifesto, isso será um sinal para o service worker de que
as atualizações precisam ser realizadas, como parte dos gerenciadores de eventos
install
e
activate. Por exemplo, se você fez algumas mudanças no site e o reconstruiu, o manifesto de pré-cache mais recente pode ter sofrido as seguintes alterações:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Cada uma dessas mudanças informa ao service worker que novas solicitações precisam ser
feitas para atualizar entradas previamente armazenadas em cache ('offline.svg' e 'index.html')
e armazenar em cache novos URLs ('app.ffaa4455.js'), bem como exclusões para limpar URLs
que não são mais usados ('app.abcd1234.js').
Verdadeira experiência de instalação em "app store"
Outro benefício do armazenamento em cache é que você pode oferecer aos usuários uma experiência que seria difícil de alcançar fora de uma instalação de "app store". Quando um usuário visita qualquer página no seu app da Web pela primeira vez, é possível pré-armazenar em cache todos os URLs necessários para exibir qualquer uma das visualizações do seu app da Web com antecedência, sem precisar esperar até que eles acessem cada visualização individual.
Quando um usuário instala um app, ele espera que todas as partes sejam mostradas rapidamente, não apenas as visualizações que ele já acessou. O pré-armazenamento em cache oferece a mesma experiência para apps da Web.
Quais dos seus recursos devem ser pré-armazenados em cache?
Consulte o guia Identificar o que está sendo carregado para saber quais URLs são mais adequados para armazenar em cache previamente. A regra geral é fazer o pré-armazenamento em cache de qualquer HTML, JavaScript ou CSS que tenha sido carregado logo no início e que seja essencial para a exibição da estrutura básica de uma determinada página.
É preferível evitar o pré-armazenamento em cache de mídia ou outros recursos que são carregados posteriormente, a menos que seja essencial para a funcionalidade do seu app da Web. Em vez disso, use uma estratégia de armazenamento em cache no ambiente de execução para garantir que esses recursos sejam armazenados em cache conforme o uso.
Sempre tenha em mente que o pré-armazenamento em cache envolve o uso da largura de banda da rede e do armazenamento no dispositivo do usuário (assim como a instalação de um app de uma app store). Como desenvolvedor, cabe a você pré-armazenar em cache criteriosamente e evitar um manifesto de pré-armazenamento excessivo.
As ferramentas de build do Workbox ajudam informando o número de itens no manifesto de pré-cache, bem como o tamanho total do payload do pré-cache.
No longo prazo, os visitantes recorrentes do seu app da Web se beneficiam do custo inicial do armazenamento em cache, já que a capacidade de evitar a rede compensa rapidamente a economia de largura de banda ao longo do tempo.