Complementando as técnicas tradicionais de pré-carregamento com service workers.
A realização de uma tarefa em um site geralmente envolve várias etapas. Por exemplo, a compra de um produto em um site de e-commerce pode envolver a pesquisa de um produto, a escolha de um item na lista de resultados, a adição do item ao carrinho e a finalização da operação.
Em termos técnicos, navegar por páginas diferentes significa fazer uma solicitação de navegação. Como regra geral, não use cabeçalhos Cache-Control de longa duração para armazenar em cache a resposta HTML de uma solicitação de navegação. Normalmente, elas são atendidas pela rede, com Cache-Control: no-cache, para garantir que o HTML e a cadeia de solicitações de rede subsequentes sejam (razoavelmente) atualizados.
Ter que ir contra a rede toda vez que o usuário navega para uma nova página significa que cada navegação pode ser lenta. Pelo menos, significa que ela não será confiável.
Para acelerar essas solicitações, se você puder antecipar a ação do usuário, solicite essas páginas e recursos com antecedência e mantenha-os no cache por um curto período até que o usuário clique nesses links. Essa técnica é chamada de pré-carregamento e é comumente implementada adicionando tags <link rel="prefetch"> às páginas, indicando o recurso a ser pré-carregado.
Neste guia, vamos explorar diferentes maneiras de usar service workers como complemento das técnicas tradicionais de pré-carregamento.
Casos de produção
O MercadoLivre é o maior site de e-commerce da América Latina. Para acelerar as navegações, ele injeta tags <link rel="prefetch"> dinamicamente em algumas partes do fluxo. Por exemplo, nas páginas de listagem, eles buscam a próxima página de resultados assim que o usuário rola até a parte de baixo da listagem:
Os arquivos pré-buscados são solicitados com a prioridade "Mais baixa" e armazenados no cache HTTP ou no cache de memória (dependendo se o recurso pode ser armazenado em cache ou não) por um período que varia de acordo com o navegador. Por exemplo, no Chrome 85, esse valor é de 5 minutos. Os recursos são mantidos por cinco minutos, após os quais as regras normais de Cache-Control para o recurso são aplicadas.
O uso do armazenamento em cache do service worker pode ajudar a estender o ciclo de vida dos recursos de pré-carregamento além da janela de cinco minutos.
Por exemplo, o portal de esportes italiano Virgilio Sport usa service workers para fazer o pré-carregamento das postagens mais populares na página inicial. Eles também usam a API Network Information para evitar a pré-busca para usuários em uma conexão 2G.
Como resultado, em mais de três semanas de observação, a Virgilio Sport observou que os tempos de carregamento para a navegação de artigos melhoraram 78%, e o número de impressões de artigos aumentou 45%.
Implementar a pré-cacheação com o Workbox
Na seção a seguir, vamos usar o Workbox para mostrar como implementar diferentes técnicas de armazenamento em cache no service worker que podem ser usadas como um complemento ao <link rel="prefetch"> ou até mesmo um substituto dele delegando essa tarefa completamente ao service worker.
1. Pré-cache de páginas estáticas e subrecursos de página
A pré-armazenagem em cache é a capacidade do service worker de salvar arquivos no cache durante a instalação.
Nos casos a seguir, o pré-armazenamento em cache é usado para atingir um objetivo semelhante ao da pré-busca: tornar a navegação mais rápida.
Pré-cachear páginas estáticas
Para páginas geradas durante a criação (por exemplo, about.html, contact.html) ou em sites completamente estáticos, basta adicionar os documentos do site à lista de pré-cache. Assim, eles já estarão disponíveis no cache sempre que o usuário os acessar:
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
// ... other entries ...
]);
Pré-cachear subrecursos da página
O pré-cache de recursos estáticos que as diferentes seções do site podem usar (por exemplo, JavaScript, CSS etc.) é uma prática recomendada geral e pode dar um impulso extra nos cenários de pré-carregamento.
Para acelerar a navegação em um site de e-commerce, use as tags <link rel="prefetch"> nas páginas de listagem para pré-carregar as páginas de detalhes dos primeiros produtos. Se você já tiver pré-armazenado os subrecursos da página do produto, isso pode tornar a navegação ainda mais rápida.
Para implementar isso:
- Adicione uma tag
<link rel="prefetch">à página:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Adicione os subrecursos da página à lista de pré-cache no worker de serviço:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
// ... other entries ...
]);
2. Ampliar o ciclo de vida dos recursos de pré-busca
Como mencionado anteriormente, o <link rel="prefetch"> busca e mantém recursos no cache HTTP por um período limitado. Depois disso, as regras Cache-Control de um recurso são aplicadas. A partir do Chrome 85, esse valor é de 5 minutos.
Os service workers permitem estender o ciclo de vida das páginas de pré-busca, oferecendo o benefício adicional de disponibilizar esses recursos para uso off-line.
No exemplo anterior, era possível complementar o <link rel="prefetch"> usado para pré-buscar uma página de produto com uma estratégia de armazenamento em cache do ambiente de execução do Workbox.
Para implementar isso:
- Adicione uma tag
<link rel="prefetch">à página:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Implemente uma estratégia de armazenamento em cache no momento da execução no service worker para estes tipos de solicitações:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
});
Neste caso, optamos por usar uma estratégia de revalidação de dados desaturos. Nessa estratégia, as páginas podem ser solicitadas do cache e da rede em paralelo. A resposta vem do cache, se disponível, ou da rede. O cache é sempre atualizado com a resposta da rede a cada solicitação bem-sucedida.
3. Delegar a pré-busca ao service worker
Na maioria dos casos, a melhor abordagem é usar <link rel="prefetch">. A tag é uma dica de recurso projetada para tornar a pré-busca o mais eficiente possível.
Em alguns casos, no entanto, pode ser melhor delegar essa tarefa completamente ao service worker.
Por exemplo, para pré-carregar os primeiros produtos em uma página de listagem de produtos renderizada do lado do cliente, talvez seja necessário injetar várias tags <link rel="prefetch"> dinamicamente na página com base em uma resposta da API. Isso pode consumir tempo na linha de execução principal da página e dificultar a implementação.
Em casos como esse, use uma "estratégia de comunicação da página para o service worker" para delegar a tarefa de pré-carregamento completamente ao service worker. Esse tipo de comunicação pode ser alcançado usando worker.postMessage():
O pacote Workbox Window simplifica esse tipo de comunicação, abstraindo muitos detalhes da chamada em questão.
A pré-busca com a janela de caixa de trabalho pode ser implementada da seguinte maneira:
- Na página: chame o service worker transmitindo o tipo de mensagem e a lista de URLs para pré-carregar:
const wb = new Workbox('/sw.js');
wb.register();
const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- No service worker: implemente um manipulador de mensagens para emitir uma solicitação
fetch()para cada URL a ser pré-carregado:
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
// Fetch URLs and store them in the cache
}
});