Estou desenvolvendo um site baseado no código fonte do Wordpress através do XAMPP. Às vezes eu mudo o código CSS, scripts ou qualquer outra coisa e percebo que meu navegador leva tempo para aplicar as modificações. Isso me leva a usar vários navegadores para atualizar um e se não aplicar os novos estilos eu tento o segundo e é sempre assim.
Existe alguma maneira de evitar esse problema? Às vezes, estou mudando o código sem perceber as modificações anteriores.
Respostas:
Pressionando Ctrl+ F5(ou Ctrl+ Shift+ R) para forçar uma recarga do cache. Acredito que os Macs usam Cmd+ Shift+ R.
Em PHP, você pode desabilitar o cache definindo a data de expiração para uma hora no passado com cabeçalhos:
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
O cache do Chrome pode ser desativado abrindo as ferramentas do desenvolvedor com F12, clicando no ícone de engrenagem no canto inferior direito e selecionando Desativar cache na caixa de diálogo de configurações, assim:
Imagem retirada desta resposta .
Digite about:configna barra de URL e encontre a entrada com o título network.http.use-cache. Defina isso como false.
Se você quiser evitar isso no lado do cliente, pode adicionar algo como ?v=1.xo link do arquivo css, quando o conteúdo do arquivo for alterado. por exemplo, se houver, <link rel="stylesheet" type="text/css" href="css-file-name.css">você pode alterá-lo para <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">ignorar o cache.
Se você pode escrever php, você pode escrever:
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
Ele sempre será atualizado!
EDIT: Claro, não é muito prático para um site inteiro, já que você não adicionaria isso manualmente para tudo.
Verifique isto: Como faço para forçar o navegador a usar a versão mais recente da minha folha de estilo?
Supondo que seu arquivo css seja foo.css, você pode forçar o cliente a usar a versão mais recente anexando uma string de consulta conforme mostrado abaixo.
<link rel="stylesheet" href="foo.css?v=1.1">
Ponto de vista do desenvolvedor
Se você estiver no modo de desenvolvimento (como na pergunta original), a melhor abordagem é desabilitar o cache no navegador por meio de metatags HTML. Para tornar essa abordagem universal, você deve inserir pelo menos três metatags, conforme mostrado abaixo.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Desta forma, você como desenvolvedor, só precisa atualizar a página para ver as mudanças. Mas não esqueça de comentar esse código quando em produção, afinal caching é uma coisa boa para seus clientes.
Modo de produção
Como na produção você permitirá o cache e seus clientes não precisam saber como forçar uma recarga completa ou qualquer outro truque, você deve garantir que o navegador carregará o novo arquivo. E sim, neste caso, a melhor abordagem que conheço é alterar o nome do arquivo.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Ele será atualizado se modificar.
Certifique-se de que isso não esteja acontecendo no seu DNS. Por exemplo, o Cloudflare tem onde você pode ativar o modo de desenvolvimento, onde força uma limpeza em suas folhas de estilo e imagens, pois o Cloudflare oferece cache acelerado. Isso irá desativá-lo e forçá-lo a atualizar sempre que alguém visitar seu site.
Essa extensão do Firefox foi a única solução que consegui fazer funcionar: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
A resposta aceita acima está correta. Se, no entanto, você deseja recarregar o cache apenas periodicamente e está usando o Firefox, as ferramentas do Web Developer (no item de menu Ferramentas a partir de novembro de 2015) fornecem uma opção de Rede. Isso inclui um botão Recarregar. Selecione o Recarregar para uma redefinição do cache uma vez.
Se você deseja ter certeza de que esses arquivos são atualizados corretamente pelo Chrome para todos os usuários, você precisa ter must-revalidateno Cache-Controlcabeçalho. Isso fará com que o Chrome verifique novamente os arquivos para ver se eles precisam ser recuperados.
Recomende o seguinte cabeçalho de resposta:
Cache-Control: must-validate
Isso diz ao Chrome para verificar com o servidor e ver se há um arquivo mais recente. Se houver um arquivo mais recente, ele o receberá na resposta. Caso contrário, ele receberá uma resposta 304 e a garantia de que o que está no cache está atualizado.
Se você NÃO definir este cabeçalho, na ausência de qualquer outra configuração que invalide o arquivo, o Chrome nunca verificará com o servidor para ver se há uma versão mais recente.
Aqui está uma postagem de blog que discute mais o assunto.
Em vez de link-tag no html-head para o arquivo css externo, use php-include:
<style>
<?php
include("style.css");
?>
</style>
Tipo de hack, mas funciona para mim :)
Decidi que, como os navegadores não verificam novas versões de arquivos css e js, renomeio meus diretórios css e js sempre que faço uma alteração. Eu uso css1 a css9 e js1 a js9 como nomes de diretório. Quando chego ao 9, começo de novo no 1. É uma dor, mas funciona perfeitamente todas as vezes. É ridículo ter que dizer aos usuários para digitar.
Eu tenho um caso em que preciso ser capaz de criar e alterar minhas folhas de estilo afetando remotamente milhares de clientes, mas devido ao risco de carga pesada de rede, não estou desligando o cache.
Como posso alterar o conteúdo HTML remotamente, vinculo a folha de estilo a um código hash que corresponde ao conteúdo da folha de estilo.
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
Dito isso, eu também uso uma função javascript do lado do cliente para substituir cuidadosamente os nós e atributos quando o conteúdo HTML é alterado, o que significa que a tag do link da folha de estilo não será substituída, apenas o atributo href será alterado.
Este cenário funciona bem no Chrome, Firefox e Edge no Windows, também Chrome no Android, mas nem sempre funciona em clientes da web no Android, para minha surpresa. Portanto, estou mais ou menos procurando algo para forçar / acionar a atualização usando javascript - de forma otimizada, sem precisar recarregar a página.
Experimente isto:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
Se você precisar de algo após o '?' que é diferente a cada vez que a página é acessada, o time()fará isso. Deixar isso em seu código permanentemente não é uma boa ideia, pois isso apenas tornará o carregamento da página mais lento e provavelmente não será necessário.
Descobri que forçar uma atualização da folha de estilo é útil se você fez alterações extensas no layout de uma página e acessar a nova folha de estilo é vital para que algo sensato apareça na tela.