Força o navegador a atualizar css, javascript, etc.

86

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.

user1511579
fonte
3
Cache de navegadores. Sempre que você fizer alterações em CSS, JavaScript e estiver visualizando a página que atualizou, verá essa preocupação. Você pode forçar uma atualização pressionando CTRL + F5 no navegador e isso obterá a versão mais recente. Descobri que o Chrome às vezes requer essa sequência algumas vezes ...
Agente de
você também pode limpar o cache do navegador programaticamente
Pawan
Responda aqui: Resposta de Fermín .
JWC de

Respostas:

107

Solução geral

Pressionando Ctrl+ F5(ou Ctrl+ Shift+ R) para forçar uma recarga do cache. Acredito que os Macs usam Cmd+ Shift+ R.

PHP

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");

cromada

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:

insira a descrição da imagem aqui
Imagem retirada desta resposta .

Raposa de fogo

Digite about:configna barra de URL e encontre a entrada com o título network.http.use-cache. Defina isso como false.

Bojangles
fonte
Obrigado JamWaffles pela descrição detalhada e obrigado a todos pelas respostas. Muito obrigado.
user1511579
Em versões recentes do Chrome: CTRL + R.
Alix Axel
1
Para o Chrome, a interface que você compartilhou mudou um pouco. Basta pressionar a guia Rede e você encontrará a caixa de seleção lá.
Baz Guvenkaya
5
Para sua informação: para Opera no Mac é cmd-alt-R
Derwent
52

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.

F0G
fonte
1
Bom ponto, mas o navegador sempre pergunta sobre o arquivo. É claro que o servidor retornará "304 Not Modified".
Andrzej Jozwik
@ajozwik Eu testei com Firefox 26.0 e Chromium 31.0.1650.57. Como você disse, o Firefox realmente faz uma nova consulta toda vez que a URL CSS contém um ponto de interrogação (e o servidor dá a resposta 304 com o corpo vazio); O Firefox não faz uma nova consulta se o URL CSS não contiver um ponto de interrogação. O Chromium não faz uma nova consulta, mesmo com um ponto de interrogação. Provavelmente, isso pode ser considerado um bug do Firefox.
Jaan
não funciona meus amigos desta forma. Somente se o nome do arquivo for diferente. Por que tantos votos positivos?
Gediminas
Encontrei em muitos outros lugares a mesma abordagem dada nesta resposta, acredito que funcionou no passado, mas não está mais funcionando. Se você estiver no modo de desenvolvimento, a melhor abordagem universal é desabilitar o cache no navegador por meio de metatags HTML. Veja minha resposta abaixo.
ePi272314
9

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.

Mageek
fonte
Não funciona assim! Somente se o nome do arquivo for diferente, o navegador recarrega. Ou talvez com essa dica apenas para alguns navegadores funcionarem, se funcionou para você
Gediminas
5

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.

ePi272314
fonte
2
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Ele será atualizado se modificar.

AllenBooTung
fonte
Uma solução muito boa para todos aqueles projetos que não usam webpack ou uma ferramenta de empacotamento que adiciona versionamento aos recursos automaticamente.
Richi González
Eu não fiz downvote, mas esta solução não funciona bem no Chrome mais recente até hoje, ela ainda busca a versão anterior do arquivo JavaScript
Mikaël Mayer
1

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.

Sean
fonte
0

Tente limpar o cache do seu navegador.

DominicEU
fonte
0

Você pode desativar o cache com a barra de ferramentas do desenvolvedor web do Firefox.

Florent
fonte
0

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.

Steve Cooke
fonte
0

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.

AgilePro
fonte
0

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 :)

Jens Rundberg
fonte
1
Você considerou que o OP não pode usar php?
Oram
0

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.

Roger Jones
fonte
0

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.

Thomas Williams
fonte
-1

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.

BPrice
fonte
1
Não funciona assim! Somente se o nome do arquivo for diferente, o navegador recarrega. Ou talvez com esta dica apenas alguns navegadores funcionem, se funcionou para você. Downvote
Gediminas