Como esvaziar programaticamente o cache do navegador?

Estou procurando uma maneira de esvaziar programaticamente o cache do navegador. Estou fazendo isso porque o aplicativo armazena em cache dados confidenciais e gostaria de removê-los quando você pressionar "sair". Isso aconteceria via servidor ou JavaScript. Obviamente, o uso do software em computadores públicos / estrangeiros ainda é desencorajado, pois há mais perigos, como key loggers, que você simplesmente não pode derrotar no nível do software.

É possível, você pode simplesmente usar o jQuery para substituir a 'meta tag' que referencia o status do cache por um manipulador / botão de evento e, em seguida, atualizar, fácil,

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

NOTA: Esta solução depende do cache do aplicativo implementado como parte da especificação do HTML 5. Também requer a configuração do servidor para configurar o manifesto do App Cache. Ele não descreve um método pelo qual é possível limpar o cache do navegador "tradicional" por meio de código do lado do cliente ou do servidor, o que é quase impossível.

Não há como um navegador permitir que você limpe seu cache. Seria um enorme problema de segurança se isso fosse possível. Isso pode ser facilmente abusado - no momento em que um navegador suportar esse "recurso" será o minuto em que eu o desinstalar do computador.

O que você pode fazer é dizer para não armazenar em cache sua página, enviando os cabeçalhos apropriados ou usando essas metatags:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Você também pode querer desativar o preenchimento automático em campos de formulário, embora eu tenha receio que exista uma maneira padrão de fazer isso ( consulte esta pergunta ).

Independentemente disso, gostaria de salientar que, se você estiver trabalhando com dados confidenciais, deverá usar SSL. Se você não estiver usando SSL, qualquer pessoa com acesso à rede poderá detectar o tráfego da rede e ver facilmente o que o usuário está vendo.

O uso do SSL também faz com que alguns navegadores não usem cache, a menos que seja explicitamente solicitado. Veja esta pergunta .

use o próprio HTML. Existe um truque que pode ser usado. O truque é anexar um parâmetro / string ao nome do arquivo na tag de script e alterá-lo quando o arquivo for alterado.

<script src="myfile.js?version=1.0.0"></script>

O navegador interpreta a cadeia inteira como o caminho do arquivo, mesmo que o que vem depois do "?" são parâmetros. Então, o que acontece agora é que, na próxima vez em que você atualizar seu arquivo, altere o número na tag de script no seu site (exemplo <script src="myfile.js?version=1.0.1"></script>) e cada navegador de usuários verá que o arquivo foi alterado e pega uma nova cópia.

A melhor idéia é fazer a geração do arquivo js com o nome + algum hash com a versão. Se você precisar limpar o cache, apenas gerar novos arquivos com o novo hash, isso ativará o navegador para carregar novos arquivos.

Inicialmente, tentei várias abordagens programáticas no meu html, JS para limpar o cache do navegador. Nada funciona no Chrome mais recente.

Finalmente, acabei com .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Testado no Chrome, Firefox, Opera

Referência: https://wp-mix.com/disable-caching-htaccess/

location.reload (true); recarregará a página atual, ignorando o cache.
Cache.delete () também pode ser usado para o novo chrome, firefox e opera.

No Chrome, você deve conseguir fazer isso usando a extensão de benchmarking. Você precisa iniciar o Chrome com as seguintes opções:

./chrome --enable-benchmarking --enable-net-benchmarking 

No console do Chrome agora você pode fazer o seguinte:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Como você pode ver pelos comandos acima, ele não apenas limpa o cache do navegador, mas também limpa o cache do DNS e fecha as conexões de rede. Isso é ótimo quando você faz comparações de tempo de carregamento da página. Obviamente, você não precisará usá-los todos se não for necessário (por exemplo, clearCache () deve ser suficiente se você precisar limpar apenas o cache e não se importar com o cache e as conexões DNS).

Agora você pode usar Cache.delete ()

Exemplo:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Funciona no Chrome 40+, Firefox 39+, Opera 27+ e Edge.

Imagine que os .jsarquivos são colocados em/my-site/some/path/ui/js/myfile.js

Normalmente, a tag de script seria semelhante a:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Agora mude isso para:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Agora é claro que isso não vai funcionar. Para fazê-lo funcionar, você precisa adicionar uma ou algumas linhas ao seu. .htaccess A linha importante é: (todo o .htaccess na parte inferior)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Então, o que isso faz é remover 1111111111o caminho e os links para o caminho correto.

Portanto, agora, se você fizer alterações, basta alterar o número 1111111111para o número que desejar. E, no entanto, ao incluir seus arquivos, você pode definir esse número através de um carimbo de data e hora quando o arquivo js foi modificado pela última vez. Portanto, o cache funcionará normalmente se o número não mudar. Se ele mudar, ele servirá o novo arquivo (SIM SEMPRE), porque o navegador obtém um novo URL completo e apenas acredita que o arquivo é tão novo que ele deve obtê-lo.

Você pode usar isso para CSS, faviconse que nunca fica armazenada em cache. Para CSS, use assim

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

E vai funcionar! Simples de atualizar, simples de manter.

O .htaccess completo prometido

Se você ainda não possui .htaccess, este é o mínimo necessário:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>