Forcer le navigateur à actualiser les fichiers css, javascript, etc.
Je développe un site Web basé sur le code source de Wordpress via XAMPP. Parfois, je change le code CSS, les scripts ou quelque chose d'autre et je remarque que mon navigateur prend le temps d'appliquer les modifications. Cela me conduit à utiliser plusieurs navigateurs pour en rafraîchir un. Si le nouveau style n'est pas appliqué, j'essaie le second et c'est toujours comme ça.
Il y a un moyen d'éviter ce problème? Parfois, je change de code sans que les modifications précédentes soient notées.
Solution générale
Pressage Ctrl + F5 (ou Ctrl + Shift + R) pour forcer le rechargement du cache. Je crois que les Mac utilisent Cmd + Shift + R.
PHP
En PHP, vous pouvez désactiver le cache en définissant la date d'expiration sur une heure passée avec des en-têtes:
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");
Chrome
Le cache de Chrome peut être désactivé en ouvrant les outils de développement avec F12, en cliquant sur l’icône représentant un engrenage dans le coin inférieur droit et en sélectionnant Désactiver le cache dans la boîte de dialogue des paramètres, comme ceci:
Image prise de cette réponse .
Firefox
Tapez about:config dans la barre d’URL, puis recherchez l’entrée intitulée network.http.use-cache. Définissez ceci sur false.
Si vous voulez éviter cela du côté client, vous pouvez ajouter quelque chose comme ?v=1.x au lien de fichier css, lorsque le contenu du fichier est modifié. Par exemple, s'il y avait <link rel="stylesheet" type="text/css" href="css-file-name.css">, vous pouvez le changer en <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">. Cela contournera la mise en cache.
Si vous pouvez écrire en php, vous pouvez écrire:
<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(); ?>" />
Cela rafraîchira toujours!
EDIT: Bien sûr, ce n’est pas vraiment pratique pour tout un site Web, car vous n’ajouteriez pas cela manuellement pour tout.
Cochez cette case: Comment forcer le navigateur à utiliser la version la plus récente de ma feuille de style?
En supposant que votre fichier css est foo.css, vous pouvez forcer le client à utiliser la dernière version en ajoutant une chaîne de requête, comme indiqué ci-dessous.
<link rel="stylesheet" href="foo.css?v=1.1">
Point de vue du développeur
Si vous êtes en mode de développement (comme dans la question initiale), la meilleure approche consiste à désactiver la mise en cache dans le navigateur via les balises méta HTML. Pour rendre cette approche universelle, vous devez insérer au moins trois balises méta, comme indiqué ci-dessous.
<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" />
De cette manière, en tant que développeur, vous devez simplement actualiser la page pour voir les modifications . Mais n'oubliez pas de commenter ce code en production, après tout, la mise en cache est une bonne chose pour vos clients.
Mode de production
Parce que, en production, vous autoriserez la mise en cache et que vos clients n’auront pas besoin de savoir comment forcer un rechargement complet ni aucune autre astuce, vous devez garantir au navigateur le chargement du nouveau fichier . Et oui, dans ce cas, La meilleure approche que je connaisse consiste à changer le nom du fichier.
J'ai décidé que, les navigateurs ne vérifiant pas les nouvelles versions des fichiers css et js, je renommais mes répertoires css et js chaque fois que je fais un changement. J'utilise css1 à css9 et js1 à js9 comme noms de répertoire. Quand j'arrive à 9 ans, je recommence à 1 heure. C'est pénible, mais cela fonctionne parfaitement à chaque fois. Il est ridicule de devoir dire aux utilisateurs de taper.
Assurez-vous que cela ne vient pas de votre DNS. Par exemple, Cloudflare vous permet d'activer le mode de développement et de forcer le nettoyage de vos feuilles de style et de vos images, car Cloudflare offre un cache accéléré. Cela le désactivera et le forcera à mettre à jour chaque fois que quelqu'un visite votre site.
Cette extension de Firefox était la seule solution possible: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Au lieu de link-tag en html-head vers un fichier css externe, utilisez php-include:
<style>
<?php
include("style.css");
?>
</style>
Un peu comme ça, mais ça marche pour moi :)
La réponse acceptée ci-dessus est correcte. Toutefois, si vous souhaitez uniquement recharger le cache régulièrement et que vous utilisez Firefox, les outils de développement Web (dans le menu Outils de novembre 2015) offrent une option Réseau. Cela inclut un bouton de rechargement. Sélectionnez le rechargement pour une réinitialisation du cache une fois.
Si vous souhaitez vous assurer que ces fichiers sont correctement actualisés par Chrome pour tous les utilisateurs, vous devez indiquer must-revalidate dans l'en-tête Cache-Control. Cela permettra à Google Chrome de vérifier à nouveau les fichiers pour savoir s'ils doivent être extraits de nouveau.
Recommandez l'en-tête de réponse suivant:
Cache-Control: must-validate
Cela indique à Chrome de vérifier auprès du serveur et de vérifier s’il existe un fichier plus récent. S'il existe un fichier plus récent, il le recevra dans la réponse. Dans le cas contraire, il recevra une réponse 304 et l’assurance que celle du cache est à jour.
Si vous ne définissez PAS cet en-tête, en l'absence de tout autre paramètre qui invalide le fichier, Chrome vérifiera jamais avec le serveur pour savoir s'il existe une version plus récente.
Voici un article blog qui traite plus en détail du problème.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Il va actualiser si modifier.
Essayez d'effacer le cache de votre navigateur.
Vous pouvez désactiver la mise en cache avec la barre d'outils de développeur Web de Firefox.