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

J'ai un cas où je dois être en mesure de créer et de modifier mes feuilles de style à distance, ce qui affecte des milliers de clients, mais en raison du risque de charge réseau importante, je ne peux pas désactiver le cache.

Puisque je peux modifier le contenu HTML à distance, je lie ensuite la feuille de style avec un code de hachage correspondant au contenu de la feuille de style.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Cela dit, j'utilise également une fonction javascript côté client pour remplacer soigneusement les nœuds et les attributs lorsque le contenu HTML change. Ainsi, la balise de lien de la feuille de style ne sera pas remplacée, seul l'attribut href changera.

Ce scénario fonctionne bien dans Chrome, Firefox et Edge sur Windows, ainsi que dans Chrome sur Android, mais ne fonctionne pas toujours dans les webclients sur Android, à ma grande surprise. Je suis donc plus ou moins à la recherche de quelque chose pour forcer/déclencher la mise à jour en utilisant javascript - de manière optimale sans avoir besoin de recharger la page.

Answer 2

Vous pouvez utiliser la barre d'outils du développeur de Firefox/Chrome :

1. Ouvrir la barre d'outils de développement Ctrl + Shift + I
2. Allez dans l'onglet réseau
3. Cochez la case "désactiver le cache" (Firefox : en haut à droite de la barre d'outils ; Chrome : en haut au centre de la barre d'outils).

Answer 3

Essayez ça :

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Si vous avez besoin de quelque chose après le '?' qui soit différent à chaque fois que la page est consultée, alors l'option time() le fera. Laisser cela dans votre code de façon permanente n'est pas vraiment une bonne idée car cela ne fera que ralentir le chargement de la page et n'est probablement pas nécessaire.

J'ai constaté que le fait de forcer un rafraîchissement de la feuille de style est utile si vous avez apporté des modifications importantes à la mise en page d'une page et que l'accès à la nouvelle feuille de style est vital pour que quelque chose de sensé apparaisse à l'écran.