Introdução

O cache é uma virada de jogo para aumentar a velocidade e a capacidade de resposta de aplicativos da Web e móveis. Neste blog, exploraremos estratégias essenciais de cache para aplicativos front-end, lidaremos com o manuseio de grandes dados e nos aprofundaremos nas complexidades do cache Backward/Forward (B/F).

Principais estratégias de cache para aplicativos front-end

Cache do navegador

O cache do navegador aproveita a capacidade do navegador de armazenar cópias de ativos da web localmente, reduzindo o tempo de carregamento e as solicitações do servidor. Aqui estão alguns aspectos cruciais:

• Cache-Control: Este cabeçalho HTTP determina as políticas de cache. Por exemplo, Cache-Control: max-age=3600 diz ao navegador para armazenar o recurso em cache por 3600 segundos.

• Expires: este cabeçalho especifica uma data/hora de expiração exata para o recurso armazenado em cache. É frequentemente usado junto com Cache-Control.

• ETag: o cabeçalho ETag fornece um identificador exclusivo para versões de recursos. Quando um recurso muda, sua ETag muda, permitindo uma validação de cache eficiente.
  

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

Trabalhadores de serviço

Service Workers são scripts executados em segundo plano, fornecendo recursos avançados de cache. Eles podem interceptar solicitações de rede e fornecer respostas em cache, permitindo até mesmo acesso offline.

• Cache First: veicular a partir do cache, se disponível; caso contrário, busque na rede.

• Rede primeiro: busque primeiro na rede; se a rede não estiver disponível, sirva a partir do cache.

• Stale-While-Revalidate: veicula a partir do cache e simultaneamente busca e atualiza o cache em segundo plano.
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Armazenamento local e IndexedDB

Local Storage e IndexedDB são soluções de armazenamento baseadas em navegador para dados persistentes no lado do cliente.

• Armazenamento local: Ideal para armazenar pequenas quantidades de dados como pares de valores-chave. É síncrono e tem um limite de armazenamento de cerca de 5 MB.

• IndexedDB: Adequado para armazenar grandes quantidades de dados estruturados. Ele suporta transações e consultas complexas, tornando-o ideal para dados mais substanciais e complexos.

Exemplo

Armazenamento local

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

Banco de dados indexado

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

O próprio navegador possui algumas técnicas de cache, aqui está uma delas.

Aprofunde-se no cache para trás/para frente (B/F)

O que é cache B/F?

Cache B/F refere-se ao mecanismo onde os navegadores armazenam o estado de uma página da web no histórico do navegador, permitindo que os usuários naveguem para frente e para trás sem recarregar a página inteira.

A maioria dos navegadores os possui, você pode explorar isso na guia inspecionar

Como funciona o cache B/F

• Cache de página: o navegador armazena o estado completo da página, incluindo o DOM, o contexto JavaScript e os dados na memória.

• BFCache: navegadores modernos (como Chrome e Firefox) usam BFCache para preservar o estado da página na memória, o que permite navegação instantânea.

Benefícios do cache B/F

• Navegação mais rápida: a página carrega instantaneamente ao usar os botões voltar e avançar do navegador.

• Experiência do usuário aprimorada: transições perfeitas melhoram a experiência geral do usuário.

• Carga reduzida do servidor: menos solicitações ao servidor à medida que o estado da página é armazenado e reutilizado.

Conclusão

A implementação de estratégias de cache eficientes pode melhorar drasticamente o desempenho de aplicativos da Web e móveis. Desde cache de navegador e service workers até lidar com grandes volumes de dados e utilizar cache B/F, essas técnicas garantem que seus aplicativos sejam rápidos, responsivos e fáceis de usar. Comece a aproveitar essas estratégias hoje para revolucionar o desempenho do seu aplicativo!

Espero que você tenha aprendido algo novo com este blog. Siga-me para blogs de tecnologia curtos, nítidos, profundos e exclusivos. Obrigado!