Navigateur et cache : une alternative au ctrl +F5 ...

Navigateur et cache : une alternative au ctrl +F5 ...

Cette phrase vous rappelle t'elle quelque chose ?

"Après chaque modification sur les pages de mon site web, lorsque je veux voir le résultat dans mon navigateur, il arrive que certaines d'entre elles ne soient pas prises en compte, même après avoir rafraichi la page via F5..."

Un exemple pour comprendre d'où vient le problème...
Vous avez un beau site web que vous faite évoluer constamment. Vous êtes donc amené, entre autre, à modifier les css (pour modifier certaines images par exemple)
Dans votre header, vous faites appel à une feuille de style externe qui se nomme "style.css" avec un petit bout de code sensiblement identique à celui-là :
{link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /}

Lorsque vous allez modifier cette feuille de style, vous n'allez pas l'enregistrer sous un nom différent et par la même occasion modifier son appel dans votre header. Vous aller faire vos modifs et enregistrer via "ctrl+s", tout simplement. Les modifications sont prises en compte, et vous n'avez pas eu à modifier l'appel à cette feuille de style dans votre header.

Lorsque vous allez recharger votre page dans votre navigateur, celui-ci va parcourir le code, s'arrêter sur le : href="css/style.css" et là... oh oh oh ! Mais je connais cette feuille de style! Je l'ai affiché il y a quelques minutes et je l'ai même conservé en mémoire! Youpi, pas besoin de la recharger une seconde fois, j'utilise celle que j'ai déjà...
Et là... Aïe aïe aïe c'est la cata. Vos modifications css ne sont plus prises en compte bouhhh !
Logique car le navigateur n'a pas cru utile de recharger votre feuille css modifiée pensant qu'elle ne l'était pas.

Le "cache", c'est quoi?
Je viens de décrire succinctement le fonctionnement du "cache" du navigateur. Cette "mémoire" sert simplement à gagner du temps pour afficher une page qui a été chargée précédemment. Lors du premier affichage d'une page (html, php etc...), le browser va stocker toutes les données en mémoire. Ainsi, les feuilles de style, Javascript, images et autres, sont mis en "cache". Lorsque vous allez afficher une seconde fois la page, un peu plus tard, le navigateur va parcourir la page et comparer toutes les données à celles qu'il possède déjà en mémoire. Si les noms et chemins des données à charger sont identiques, il considère qu'aucun changement n'a été effectué sur ces fichiers et va donc utiliser ceux qu'il possède déjà en mémoire.

Des solutions?
Pour pallier à ce petit souci il existe plusieurs solutions. L'une d'elle, très utile consiste à faire CTRL+F5, autrement dit : Vidage du cache du navigateur et rechargement de la page. Par ce biais, vous obligez donc le browser à tout recharger.
L'inconvénient de cette méthode est que tout le monde ne la connait pas et qu'elle requiert une action de l'utilisateur... D'autre part, si vous n'avez modifié qu'un ou deux fichiers, c'est dommage de tout recharger. L'idéal serait de recharger uniquement les fichiers ayant subi des modifications...

J'ai une petite astuce bien utile qui vous dispense de cette première solution très lourde...
Le but étant de forcer le navigateur à charger certains fichiers qu'il a déjà en mémoire, nous allons simplement utiliser une variable (peu importe le nom...) que nous allons affecter uniquement aux fichiers et données modifiés. Eux seuls seront rechargés par le browser...

Méthode
Pour utiliser une variable on utilise cette syntaxe : ?variable=x. Avec variable=le nom de votre variable et x=la valeur de votre variable. Vous avez déjà surement vu ce type de syntaxe dans les urls mais vous pouvez tout à fait l'utiliser dans n'importe quel nom de fichier.

Un exemple avec notre fichier "style.css".
Remplaçons le : {link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /}
par : {link rel="stylesheet" href="css/style.css?refresh=0" type="text/css" media="screen" /}
Ici, nous avons simplement indiqué au navigateur que la feuille de style "style.css" est accompagnée d'une variable qui s'appelle "refresh" est qui a pour valeur "0".
Après toute modification de cette feuille de style, remplacez le 0 par 1, puis par 2(pour une modification supplémentaire) etc... puis enregistrez votre page (html, php etc...)
Lorsque le navigateur va parcourir votre page, il va simplement voir que la valeur de la variable "refresh" a changé et va donc automatiquement recharger le fichier "style.css" sans utiliser celui qui se trouve en cache.

Bien entendu, vous pouvez utilisez cette petite astuce pour n'importe quel type de fichier appelé dans votre page. Vous pouvez également l'utiliser sur autant de fichiers que vous le souhaitez.

Remarque
Le cache du navigateur étant utilisé pour gagner du temps lors de l'affichage d'une page déjà chargée précédemment, utiliser l'astuce de la variable à outrance revient à supprimer la fonction de cache et donc augmenter le temps de chargement de la page... Tout à un coût...