Um recurso dos service workers é a capacidade de salvar arquivos no cache quando que o service worker está instalando. Isso é chamado de "precaching". O pré-armazenamento em cache possibilita disponibilizar arquivos em cache para o navegador sem à rede. Use o pré-armazenamento em cache para recursos essenciais que seu site precisa 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 você tivesse que gerenciar o controle de versões e a atualização desses 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 para cada URL. Juntas, essas informações são conhecidas como manifesto de pré-cache. O manifesto é a "fonte da verdade" para o estado de tudo que deveria estar o pré-cache para uma determinada versão de um app da Web. Um manifesto de pré-cache, no arquivo formato usado pelo Workbox, é mais ou menos assim:
[{
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 controle de versão
informações já incluídas em seu URL (app é o nome real do arquivo e
.abcd1234 contém as informações do controle de versão, logo antes da extensão do arquivo
.js). As ferramentas de build do Workbox podem detectar isso e excluir um campo de revisão. A
os outros dois recursos não incluem informações de controle de versão nos URLs. Por isso,
as ferramentas de build criam um campo revision separado, contendo um hash do código-fonte
o conteúdo do arquivo.
Como exibir recursos pré-armazenados em cache
Adicionar recursos ao cache é apenas uma parte da história de pré-armazenamento em cache.
recursos são armazenados em cache, eles precisam responder a solicitações enviadas. Isso requer uma
Listener de eventos fetch no seu service worker que pode verificar quais URLs têm
foram pré-armazenadas em cache e retornam essas respostas armazenadas em cache de forma confiável, ignorando
no processo. Como o service worker verifica o cache em busca de respostas
(e os 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 cache esperado state; 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 atualizado. Leva apenas uma única solicitação de rede, feita automaticamente pelo navegador como parte do service worker verificação de atualizações, 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, é preciso manter URLs previamente armazenados em cache, pré-armazenar em cache novos recursos e excluir itens desatualizados de entradas de registro. Contanto que você continue gerando um manifesto de pré-cache completo a cada vez você recriar seu site, esse manifesto servirá como a "fonte da verdade" para sua o estado de pré-cache a qualquer momento.
Se já houver um URL com um novo campo de revisão ou se algum URL foi
adicionados ou removidos do manifesto, isso é um sinal para o service worker de que
e atualizações precisam ser realizadas, como parte
install
e
activate
manipuladores de eventos. Por exemplo, se você fez algumas alterações em seu site e
for recriado, seu manifesto de pré-cache mais recente pode ter passado pelos seguintes
muda:
[{
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
feito para atualizar entradas armazenadas em cache anteriormente ('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').
Verdadeiro "app store" experiência de instalação
Outro benefício do armazenamento em cache é que você pode oferecer aos usuários uma experiência que seriam difíceis de alcançar fora de uma "loja de aplicativos" e instalação. Quando um usuário visita qualquer página em seu aplicativo da Web pela primeira vez, é possível pré-armazenar em cache todos os URLs necessários para exibir qualquer um dos seus visualizações do aplicativo da Web com antecedência, sem ter que esperar até que cada um seja acessado uma visualização individual.
Quando um usuário instala um aplicativo, ele espera que todas as partes sejam exibidas rapidamente, não apenas as visualizações que eles acessaram no passado. O pré-armazenamento em cache oferece a mesma aos apps da Web.
Quais dos seus recursos devem ser pré-armazenados em cache?
Consulte a seção Identificar o que está sendo carregado para ter uma boa imagem de quais URLs fazem mais sentido armazenar previamente em cache. A regra geral é pré-armazenar em cache qualquer HTML, JavaScript ou CSS que tenha sido carregado no início e que seja crucial para exibir a 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 mais tarde (a menos que seja essencial para a funcionalidade do seu app da Web). Em vez disso, use um ambiente de execução estratégia de armazenamento em cache para garantir os recursos são armazenados em cache enquanto você usa.
Sempre tenha em mente que o pré-armazenamento em cache envolve o uso da largura de banda e do armazenamento da rede no dispositivo do usuário (assim como instalar um aplicativo de uma loja de aplicativos). Como desenvolvedor, cabe a você pré-armazenar em cache criteriosamente e evitar uma sobrecarga manifesto de pré-cache.
As ferramentas de build do Workbox informam o número de itens no pré-cache e o tamanho total do payload do pré-cache.
Visitantes recorrentes de seu aplicativo da web se beneficiam a longo prazo do custo inicial de o pré-armazenamento em cache, já que a capacidade de evitar a rede compensa rapidamente em largura de banda economizada ao longo do tempo.