home Développement Web, Tutoriaux Une astuce pour contourner le cache navigateur dans vos développements web

Une astuce pour contourner le cache navigateur dans vos développements web

Les navigateurs d’aujourd’hui stockent tous les fichiers JavaScript, CSS et images du site Internet que vous visitez pour que lorsque vous le rappelez celui-ci se recharge plus rapidement.

S’il y a bien quelque chose que j’ai appris en développant un ERP sur mesure en méthode agile, c’est que l’ERP évolue chaque jour et que beaucoup de mécanismes internes changent totalement. Cela peut se baser au niveau des flux intégrés en PHP mais ça arrive aussi de devoir modifier ou ajouter un flux technique-métier au niveau d’un fichier JavaScript par exemple.

Seulement voila, changer un fichier JavaScript pour intégrer de nouveau mécanisme pour ses utilisateurs c’est bien mais quand les navigateurs des utilisateurs ne prennent pas en compte dans l’immédiat vos changements c’est moins bien .

En configurant votre serveur Web, il est possible de dire au navigateur de vos utilisateurs de recharger le cache tous les XX mois, mais si vous faîtes un changement avant cette échéance quelque soit la raison, on va se retrouver coincé et on ne va pas demander à nos utilisateurs d’effectuer un petit spam de sa touche « F5 » pour que le site s’affiche correctement suivant vos derniers changements.

Il existe une technique simple et efficace pour remédier à cela.

Faire croire à votre navigateur que votre fichier n’est plus le même

La question à se poser est la suivante :

  • Qu’est ce qui fait que mon fichier soit mis en cache et que même en le modifiant celui-ci n’est pas repris en compte par mon navigateur dans l’immédiat ?

C’est comme-ci vous aviez une maison dans une rue au numéro 37 et que vous avez modifier son intérieur. De l’extérieur, c’est toujours la même rien n’a changé mais pourtant l’intérieur a changé seulement on ne peut pas s’en rendre compte. Pour le navigateur, c’est toujours le même fichier il a le même nom (extérieur de la maison) malgré que j’ai modifié son contenu (intérieur de la maison).

Vous l’aurez compris il faut dire au navigateur que le fichier a changé en changeant son nom par exemple seulement on ne va pas s’amuser à modifier manuellement chaque nom des fichiers CSS et JavaScript surtout si on en a pas mal. On va faire pour cela du versioning de fichier.

Pour pouvoir le faire, nous allons changer dynamiquement le nom des fichiers JavaScript et CSS (on peut aussi l’appliquer aux images). Par exemple, si nous avons un lien vers un fichier JavaScript de ce type :

avec notre méthode on obtiendra ceux-ci par exemple :

C’est comme-ci on passait un paramètre GET à notre fichier JavaScript sauf qu’on ne l’exploite pas. Par contre, pour le navigateur le fichier a changé car il n’a pas encore de fichier appelé « monfichier.js?ver=1.3.2 » stocké dans son cache pour votre site Internet. Si on change une fonction JavaScript dans le fichier et que l’on veut que tous les navigateurs prennent en compte immédiatement ce changement, on va changer le paramètre GET en 1.3.3 par exemple.

C’est simple mais efficace :).

On va gérer cela avec une fonction PHP que voici :

La fonction n’est pas très compliquée, juste deux paramètres à fixer :

– Le premier paramètre prend le lien du fichier, celui que vous appliqueriez dans l’attribut « src »

– Le deuxième paramètre prend la version que vous voulez appliquer au fichier

Vous pouvez par exemple gérer le deuxième paramètre comme une constante. En changeant la valeur de la constante cela changera la version de tous vos fichiers en un coup. Vous pouvez bien sûr gérer une constante par type de fichier si vous le voulez.

Et voici comment on l’appelle :

Ce qui donnera :

Bien sûr, on peut toujours améliorer la fonction ou même le mécanisme, mais personnellement cette fonction me suffit amplement pour mes projets. Si vous avez de meilleurs mécanismes ou techniques pour gérer vos versioning de fichiers n’hésitez pas à me les soumettre ;).

Gaëtan Cottrez

CHOOSE A JOB YOU LOVE AND YOU WILL NOT HAVE TO WORK A DAY IN YOUR LIFE

Partagez cette article sur :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Apprenez gratuitement les 7 secrets de l'art de bien coder
Vous saurez comment avoir les bons réflexes, une bonne méthodologie de travail, une meilleure lisibilité et sécurité de votre code