Forçar o navegador a limpar o cache

Existe uma maneira de colocar algum código na minha página para que, quando alguém visite um site, ele limpe o cache do navegador para que ele possa visualizar as alterações?

Idiomas usados: ASP.NET, VB.NET e, claro, HTML, CSS e jQuery.

Se isso ocorrer .csse .jsmudar, uma maneira de "impedir o armazenamento em cache" é anexar algo como " _versionNo" ao nome do arquivo para cada release. Por exemplo:

script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.

Ou, alternativamente, faça-o após o nome do arquivo:

script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.

Você pode conferir este link para ver como ele poderia funcionar.

Olhe para o controle de cache e a tag META expira .

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Outra prática comum é anexar seqüências em constante mudança ao final dos arquivos solicitados. Por exemplo:

<script type="text/javascript" src="main.js?v=12392823"></script>

Atualização 2012

Essa é uma pergunta antiga, mas acho que precisa de uma resposta mais atualizada, porque agora existe uma maneira de ter mais controle do cache do site.

Em Aplicativos da Web offline (que é realmente qualquer site HTML5), você applicationCache.swapCache()pode atualizar a versão em cache do site, sem a necessidade de recarregar manualmente a página.

Este é um exemplo de código do Guia do Iniciante para Usar o Cache do Aplicativo nas Rochas HTML5, explicando como atualizar os usuários para a versão mais recente do seu site:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Consulte também Usando o cache do aplicativo na Mozilla Developer Network para obter mais informações.

Atualização 2016

As coisas mudam rapidamente na Web. Esta pergunta foi feita em 2009 e em 2012 publiquei uma atualização sobre uma nova maneira de lidar com o problema descrito na pergunta. Mais quatro anos se passaram e agora parece que ele já está obsoleto. Agradecemos a cgaldiolo por apontar nos comentários.

Atualmente, em julho de 2016, o padrão HTML, seção 7.9, aplicativos offline da Web inclui um aviso de descontinuação:

Esse recurso está sendo removido da plataforma da Web. (Esse é um processo longo que leva muitos anos.) No momento, o uso de qualquer um dos recursos de aplicativos da Web offline é altamente desencorajado. Use trabalhadores de serviço em seu lugar.

O mesmo acontece com o uso do cache do aplicativo na Mozilla Developer Network que referenciei em 2012:

Descontinuado
Esse recurso foi removido dos padrões da Web. Embora alguns navegadores ainda possam suportá-lo, ele está sendo eliminado. Não o use em projetos antigos ou novos. As páginas ou aplicativos da Web que o utilizam podem quebrar a qualquer momento.

Consulte também Bug 1204581 - Adicione um aviso de descontinuação para o AppCache se a interceptação de busca do trabalhador de serviço estiver ativada .

Não como tal. Um método é enviar os cabeçalhos apropriados ao fornecer conteúdo para forçar o navegador a recarregar:

Garantir que uma página da Web não seja armazenada em cache em todos os navegadores.

Se sua pesquisa "cache header"ou algo semelhante aqui no SO, você encontrará exemplos específicos do ASP.NET.

Outra maneira menos limpa, mas às vezes a única maneira de controlar os cabeçalhos no servidor, é adicionar um parâmetro GET aleatório ao recurso que está sendo chamado:

myimage.gif?random=1923849839

Para recursos estáticos, o armazenamento em cache correto seria usar parâmetros de consulta com o valor de cada implantação ou versão de arquivo. Isso terá efeito de limpar o cache após cada implantação.

/Content/css/Site.css?version={FileVersionNumber}

Aqui está o exemplo do ASP.NET MVC.

<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

Não se esqueça de atualizar a versão do assembly.

Eu tive um problema semelhante e foi assim que resolvi:

1. No index.htmlarquivo eu adicionei manifesto:

   <html manifest="cache.manifest">

2. Na <head>seção script incluído, a atualização do cache:

   <script type="text/javascript" src="update_cache.js"></script>

3. Na <body>seção eu inseri a função onload:

   <body onload="checkForUpdate()">

4. Em cache.manifesteu coloquei todos os arquivos que eu quero armazenar em cache. É importante agora que funcione no meu caso (Apache) apenas atualizando cada vez que o comentário "versão". Também é uma opção para nomear arquivos com "? Ver = 001" ou algo no final do nome, mas não é necessário . Alterar apenas # version 1.01aciona o evento de atualização do cache.

   CACHE MANIFEST
   # version 1.01
   style.css
   imgs/logo.png
   #all other files

   É importante incluir os pontos 1., 2. e 3. apenas no index.html. De outra forma

   GET http://foo.bar/resource.ext net::ERR_FAILED

   ocorre porque todo arquivo "filho" tenta armazenar em cache a página enquanto a página já está em cache.

5. No update_cache.jsarquivo eu coloquei este código:

   function checkForUpdate()
   {
       if (window.applicationCache != undefined && window.applicationCache != null)
       {
           window.applicationCache.addEventListener('updateready', updateApplication);
       }
   }
   function updateApplication(event)
   {
       if (window.applicationCache.status != 4) return;
       window.applicationCache.removeEventListener('updateready', updateApplication);
       window.applicationCache.swapCache();
       window.location.reload();
   }

Agora você acabou de alterar os arquivos e, no manifesto, precisa atualizar o comentário da versão. Agora, visitar a página index.html atualizará o cache.

As partes da solução não são minhas, mas eu as encontrei através da Internet e reunidas para que funcionem.

Eu tive um caso em que eu tirava fotos de clientes on-line e precisaria atualizar a div se uma foto fosse alterada. O navegador ainda estava mostrando a foto antiga. Então, eu usei o hack de chamar uma variável aleatória GET, que seria única todas as vezes. Aqui está, se isso pudesse ajudar alguém

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

EDITAR Como apontado por outros, a seguir é uma solução muito mais eficiente, uma vez que recarregará as imagens somente quando elas forem alteradas, identificando essa alteração pelo tamanho do arquivo:

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Muitas respostas estão faltando ao ponto - a maioria dos desenvolvedores sabe que desligar o cache é ineficiente. No entanto, existem muitas circunstâncias comuns em que a eficiência não é importante e o comportamento do cache padrão é bastante prejudicado.

Isso inclui testes de script iterativos aninhados (o maior!) E soluções alternativas de software de terceiros quebradas. Nenhuma das soluções fornecidas aqui é adequada para abordar esses cenários comuns. A maioria dos navegadores da Web é um cache muito agressivo e não oferece meios adequados para evitar esses problemas.

<meta http-equiv="pragma" content="no-cache" />

Consulte também /programming/126772/how-to-force-a-web-browser-not-to-cache-images

Atualizar o URL para o seguinte funciona para mim:

/custom.js?id=1

Ao adicionar um número único depois ?id=e incrementá-lo para novas alterações, os usuários não precisam pressionarCTRL + F5 para atualizar o cache. Como alternativa, você pode anexar a versão hash ou string do horário atual ou da Epoch após?id=

Algo como ?id=1520606295

Aqui está a página MDSN sobre a configuração do cache no ASP.NET.

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True

If Response.Cache.VaryByParams("Category") Then
   '...
End If

Não tenho certeza se isso pode realmente ajudá-lo, mas é assim que o cache deve funcionar em qualquer navegador. Quando o navegador solicita um arquivo, ele deve sempre enviar uma solicitação ao servidor, a menos que exista um modo "offline". O servidor irá ler alguns parâmetros como data de modificação ou etags.

O servidor retornará uma resposta de erro 304 para NÃO MODIFICADO e o navegador precisará usar seu cache. Se o etag não for validado no lado do servidor ou a data de modificação estiver abaixo da data de modificação atual, o servidor deverá retornar o novo conteúdo com a nova data ou etags modificadas ou ambas.

Se não houver dados de cache enviados ao navegador, acho que o comportamento é indeterminado, o navegador pode ou não armazenar em cache arquivos que não informam como eles são armazenados em cache. Se você definir parâmetros de armazenamento em cache na resposta, os arquivos serão armazenados em cache corretamente e o servidor poderá optar por retornar um erro 304 ou o novo conteúdo.

É assim que deve ser feito. Usar parâmetros aleatórios ou número de versão em URLs é mais um truque do que qualquer coisa.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- expire-header-vs-etag /

Depois de ler, vi que também há uma data de validade. Se você tiver algum problema, pode ser que você tenha uma data de validade configurada. Em outras palavras, quando o navegador armazenará o arquivo em cache, já que ele tem uma data de validade, ele não deverá solicitá-lo novamente antes dessa data. Em outras palavras, ele nunca solicitará o arquivo ao servidor e nunca receberá um 304 não modificado. Ele simplesmente usará o cache até que a data de validade seja atingida ou o cache seja limpo.

Portanto, esse é meu palpite: você tem algum tipo de data de validade e deve usar etags da última modificação ou uma mistura de tudo e garantir que não haja uma data de validade.

Se as pessoas tendem a atualizar muito e o arquivo não sofrer muitas alterações, pode ser aconselhável definir uma grande data de validade.

Meus 2 centavos!

Eu implementei esta solução simples que funciona para mim (ainda não no ambiente de produção):

function verificarNovaVersio() {
    var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
    $.ajax({
        url: "./versio.txt"
        , dataType: 'text'
        , cache: false
        , contentType: false
        , processData: false
        , type: 'post'
     }).done(function(sVersioFitxer) {
        console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
        if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
            localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
            location.reload(true);
        }
    });
}

Eu tenho um pequeno arquivo localizado onde estão o html:

"versio.txt":

v00.5.0014

Essa função é chamada em todas as minhas páginas; portanto, ao carregá-la, verifique se o valor da versão do localStorage é menor que a versão atual e faz um

location.reload(true);

... para forçar a recarga do servidor em vez do cache.

(obviamente, em vez de localStorage, você pode usar cookies ou outro armazenamento persistente do cliente)

Optei por esta solução por sua simplicidade, porque apenas a manutenção de um único arquivo "versio.txt" forçará o recarregamento do site completo.

O método queryString é difícil de implementar e também é armazenado em cache (se você mudar da v1.1 para uma versão anterior será carregada do cache, isso significa que o cache não será liberado, mantendo todas as versões anteriores no cache).

Sou um pouco novato e agradeceria sua verificação e revisão profissional para garantir que meu método seja uma boa abordagem.

Espero que ajude.

Além de configurar Cache-control: no-cache, você também deve definir o cabeçalho Expir como -1 se desejar que a cópia local seja atualizada a cada vez (algumas versões do IE parecem exigir isso).

Consulte Cache HTTP - verifique com o servidor, sempre enviando If-Modified-Since

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 toda a cadeia de caracteres 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.

Forçar navegadores a limpar o cache ou recarregar os dados corretos?Eu tentei a maioria das soluções descritas no stackoverflow, algumas funcionam, mas depois de um tempo, ele acaba armazenando em cache e exibindo o script ou arquivo carregado anteriormente. Existe outra maneira de limpar o cache (css, js, etc) e realmente funcionar em todos os navegadores?

Descobri até agora que recursos específicos podem ser recarregados individualmente se você alterar a data e a hora em seus arquivos no servidor. "Limpar cache" não é tão fácil como deveria ser. Em vez de limpar o cache em meus navegadores, percebi que "tocar" nos arquivos do servidor em cache altera a data e a hora do arquivo de origem em cache no servidor (Testado no Edge, Chrome e Firefox) e a maioria dos navegadores baixa automaticamente os arquivos mais cópia atualizada atual do que está no seu servidor (código, gráficos também multimídia). Eu sugiro que você copie os scripts mais atuais no servidor e a solução "faça o que é necessário" antes da execução do programa, para que ele altere a data de todos os seus arquivos com problemas para a data e hora mais atuais e faça o download de uma nova cópia para o seu navegador:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

então ... o resto do seu programa ...

Levei algum tempo para resolver esse problema (como muitos navegadores agem de maneira diferente com comandos diferentes, mas todos verificam a hora dos arquivos e se comparam à sua cópia baixada no navegador, se houver data e hora diferentes, a atualização será feita). Não é possível seguir o caminho certo, sempre há outra solução melhor e utilizável. Cumprimentos e acampamento feliz. A propósito, toque (); ou alternativas funcionam em muitas linguagens de programação, inclusive em javascript bash sh php e você pode incluí-las ou chamá-las em html.

Deseja limpar o cache ou apenas garantir que sua página atual (alterada?) Não esteja em cache?

Neste último caso, deve ser tão simples quanto

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">