18.02.2025

Limpeza do Cache do Navegador via Servidor ou JavaScript

Resumo Rápido

A remoção direta do cache do navegador usando código de programação é impossível devido a rigorosas exigências de segurança. No entanto, existem métodos que permitem que o navegador recarregue recursos da web armazenados em cache. Por exemplo, você pode usar o cabeçalho HTTP Cache-Control: no-cache, que obriga o navegador a solicitar novos dados a cada vez, e também pode aplicar uma chave de consulta, como um número de versão ou timestamp nas URLs dos recursos:

Cache-Control: no-cache

<script src="script.js?v=12345"></script> <!-- Hora de atualizar! Mudanças estão a caminho 😄 -->

Esses métodos ajudam a contornar limitações simulando um modo sem cache.

Diretiva Clear-Site-Data

A diretiva Clear-Site-Data permite que o servidor instrua o navegador a excluir dados relacionados ao domínio. Ela é usada assim:

Clear-Site-Data: "cache", "cookies", "storage", "executionContexts"

Ao usar Clear-Site-Data, tenha em mente que ela remove não apenas o cache.

Usando a API de Cache

Em navegadores que suportam a API de Cache para service workers, você pode excluir objetos do cache através de Cache.delete(). Isso é feito no código do service worker ou no manipulador de eventos:

caches.open('meu-cache').then(cache => {
  cache.delete('/minha-url-cacheada'); // Dados estão desatualizados, hora de dizer adeus 👋
});

Versionamento de Recursos

Para atualizar recursos de página, como scripts e estilos, use identificadores únicos em suas URLs. Ferramentas de compilação podem automatizar esse processo adicionando um hash ao nome do arquivo:

<link rel="stylesheet" href="styles.d1984f.css"/> <!-- Ninguém vai recusar novos estilos! 🕴️ -->

Protegendo Informações Sensíveis

Para controlar o cache de páginas com informações pessoais, use tags <meta>. Para evitar que os dados do formulário sejam salvos, adicione autocomplete="off". Para proteger a transmissão de informações sensíveis, sempre use SSL.

<meta http-equiv="Pragma" content="no-cache"> <!-- Cache não é permitido aqui, temos segredos 😌 -->

<input type="password" name="password" autocomplete="off"> <!-- Sem necessidade de lembrar 🤫 -->

Visualização

Vamos visualizar o processo de "limpeza do cache do navegador":

1. Os cabeçalhos Cache-Control (Cache-Control: no-cache) são como faxineiros garantindo a frescura e relevância dos dados a cada visita.

2. Os service workers são equipes especializadas gerenciando o cache e otimizando o carregamento de recursos.

3. O cabeçalho Clear-Site-Data atua como um "botão de emergência", ativando a remoção de todos os dados armazenados em cache.

Imagine o cache do navegador como uma lixeira transbordando (🗑️ transbordando), que precisa ser esvaziada de tempos em tempos (⚙️🗑️ = Limpado!).

Apesar da ausência de um botão unificado para limpar o cache, esses métodos permitem uma gestão eficaz do cache.

Gestão de Hash de Conteúdo

O sistema de hash de conteúdo garante que quaisquer mudanças em um arquivo exijam que ele seja atualizado devido à alteração do nome de arquivo único. Essa abordagem é crucial para gerenciamento de versões e para forçar os navegadores a carregar a nova versão do arquivo após a modificação.

Operação Offline e Velocidade de Carregamento com App Cache

Se o aplicativo web precisa funcionar offline ou acelerar os tempos de carregamento, considere usar o HTML5 Application Cache. No entanto, é necessária uma configuração cuidadosa para garantir que a configuração do servidor corresponda aos parâmetros do manifesto do App Cache.

Regras de Segurança em Computadores Públicos

O uso de computadores públicos aumenta o risco de ameaças à segurança, como keyloggers. Limpar o cache sozinho não fornece proteção. É essencial implementar medidas de segurança abrangentes que vão além da gestão do cache.

Recursos Úteis

1. Cache-Control - HTTP | MDN
2. Guia para Iniciantes sobre o uso de Application Caches | web.dev
3. HTTP/1.1: Definições de Campos de Cabeçalho
4. Como evitar solicitações de rede desnecessárias usando o cache HTTP? | web.dev
5. Existe uma tag <meta> para desativar o cache em todos os navegadores? - Stack Overflow
6. RFC 7469 - Extensão de Pinagem de Chave Pública para HTTP
7. Qual a diferença entre "Recarregar Normal", "Recarregar Forçado" e "Esvaziar Cache e Recarregar Forçado" no Chrome? - Stack Overflow

Video

Navigation