Forcez le navigateur à rafraîchir les CSS, JavaScript, etc.

Question

Je suis en train de développer un site web basé sur le code source de WordPress via XAMPP. Parfois, je modifie le code CSS, scripts ou autre et je remarque que mon navigateur met du temps à appliquer les modifications. Cela m'amène à utiliser plusieurs navigateurs pour en rafraîchir un et s'il n'applique pas les nouveaux styles, j'essaie le deuxième et c'est toujours ça.

Y a-t-il un moyen d'éviter ce problème ?

Parfois, je modifie le code sans remarquer les modifications précédentes.

Answer 1

Solution générale

Presser Ctrl + F5 (o Ctrl + Shift + R ) pour forcer un rechargement du cache. Je crois que les Macs utilisent Cmd + Shift + R .

PHP

En PHP, vous pouvez désactiver le cache en fixant la date d'expiration à un moment dans le passé avec les 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 de l'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 tirée de cette réponse .

Firefox

Type about:config dans la barre d'URL puis trouver l'entrée intitulée network.http.use-cache . Réglez-le sur false .

Answer 2

Si vous voulez éviter cela du côté client, vous pouvez ajouter quelque chose comme ?v=1.x au lien du fichier css, lorsque le contenu du fichier est modifié. par exemple, s'il y a eu <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 permettra de contourner la mise en cache.

Answer 3

Si vous pouvez écrire du 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(); ?>" />

Elle sera toujours rafraîchie !

EDIT : Bien sûr, ce n'est pas vraiment pratique pour un site web entier, puisque vous ne l'ajouteriez pas manuellement pour tout.

Answer 4

Regarde ça : Comment puis-je forcer le navigateur à utiliser la dernière version de ma feuille de style ?

Je suppose 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">

Answer 5

Point de vue du développeur
Si vous êtes en mode développement (comme dans la question initiale), la meilleure approche consiste à désactiver la mise en cache dans le navigateur via les métabalises 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 façon, en tant que développeur, il vous suffit de rafraîchir la page pour voir les changements. 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
Étant donné qu'en production vous autoriserez la mise en cache et que vos clients n'ont pas besoin de savoir comment forcer un rechargement complet ou toute autre astuce, vous devez garantir que le navigateur chargera le nouveau fichier. Et oui, dans ce cas, la meilleure approche que je connaisse est de changer le nom du fichier.