Le problème

Les navigateurs (tous confondus) utilisent un système de cache local qui permet d’afficher plus rapidement une page une fois que celle-ci a déjà été affichée. Le problème c’est que si vous poussez une mise à jour d’un fichier javascript ou un fichier de style, les visiteurs qui auront déjà ce fichier en cache ne verront aucun changement sur le site car leur navigateur sortira le fichier en cache.

La solution

Pour éviter ce problème très frustrant à la longue, il existe une pratique qui utilise une fonction PHP pour permettre de dater le fichier. Cette fonction s’appelle filemtime et va renvoyer la date de dernière modification du fichier au format timestamp.

Voici comment l’utiliser :

<script type='text/javascript' src='js/monfichier.js?date=<?=filemtime('js/monfichier.js')?>'></script>

il suffit donc de mettre un paramètre GET (ici « date ») avec comme valeur le timestamp de la date de dernière modification de votre fichier (donné par la fonction filemtime) pour que le navigateur pense qu’il s’agit d’un nouveau fichier et aille le chercher sur le serveur.

Procédez comme cela pour chaque fichier javascript et css mais aussi pour les images si besoin.

Attention au chemin (path) que vous allez utiliser pour filemtime. Un chemin peut être relatif ou absolue. Si vous avez une erreur PHP contenant le terme « stat failed« , ceci veut dire que PHP n’a pas réussit à récupérer les infos du fichier, ce qui le plus probablement sera une erreur de chemin. Alors relatif ? ou absolue ? Ceci va dépendre de votre configuration PHP, mais le plus souvent le chemin relatif fonctionnera.

Conclusion

J’espère que ce petit tutoriel vous aura aidé à comprendre une méthode simple pour vous éviter bien des problèmes de cache. J’utilise maintenant cette méthode dans tous les projets que j’entreprends, c’est vraiment une « best practice » comme on dit dans le métier.