Forcer le navigateur a recharger les fichiers CSS et JS d’une page Web

July 13th, 2007

La plupart des utilisateurs naviguent sur internet avec le cache de leur navigateur activé, ce qui est en soit une bonne chose. Cela permet de diminuer le trafic requis pour afficher la page, la page s’affiche donc plus vite, et le serveur a moins de données a uploader.

Le souci, c’est que quand vous apportez des modifs à vos fichiers JS ou CSS, si l’utilisateur a déjà des anciennes versions dans son cache, son navigateur ne les téléchargera pas, à moins que l’utilisateur vide son cache manuellement (CTRL+F5), ce que les utilisateurs “lambda” ne font pas.

Nous allons voir comment exploiter le comportement des navigateurs face aux paramètres en GET dans les URL, et ainsi remédier au problème :-)

Dans votre ‘);?>, il faut mettre un paramètre en GET pour chaque fichier étant susceptible d’être modifié. Pour pouvoir s’y retrouver, on peut par exemple mettre la date :


');?>

Si vous voulez forcer le navigateur à recharger ces fichiers même lors d’un simple rafraîchissement, il suffit de modifier le paramètre en GET :


');?>

Les fichiers seront alors rechargés via un simple F5. En PHP, on peut automatiser le tout via la fonction filemtime(), ce qui donne :

">
');?>

J’ai mis un @ au cas où le fichier n’existe pas, après peut être que c’est mieux de d’abord tester avec file_exists(), je pense que ça revient au même, mais je suis pas sûr.

J’ai testé avec les navigateurs suivants :

  • Internet Explorer 6.0 (windows)
  • Internet Explorer 7.0 (windows)
  • Firefox 1.0 (windows)
  • Firefox 1.5 (windows)
  • Firefox 2.0 (windows)
  • Opera 9.02 (windows)
  • Safari 3.0.2 (windows)
  • Kazehakaze 0.4.2 (linux)
  • Opera 9.02 (linux)
  • Epiphany 2.14.3 (linux)
  • Iceweasel 2.0 (linux)
  • Konqueror 3.5.5 (linux)

Cela a fonctionné avec tous, je pense donc qu’on peut utiliser cette technique de façon safe.

Cela vous permettra d’être sûr que tous vos buy menthol cigarettes visiteurs profitent bien des dernières modifications que vous avez apporté sur votre site ;-)

10 Responses to “Forcer le navigateur a recharger les fichiers CSS et JS d’une page Web”

  1. Damien Says:

    Superbe, c’est exactement ce qu’il me fallait pour l’intranet que je maintiens à mon taf, etant donné que je mets à jour souvent les css et les js.

    merci beaucoup de l’astuce.

  2. michael Says:

    Quitte à faire du php, citons aussi la possibilité d’ajouter un header dans le fichier Css ou javascript

    header(“Cache-Control: no-cache, must-revalidate”);
    header(“Expires: Mon, 10 Jan 2000 00:00:00 GMT”); // Date volontairement expirée

    En soit, cette méthode est plus propre, puisque qu’elle permet réèllement de ne pas mettre en cache le CSS. Dans la méthode de l’article ci-dessus, le visiteur met en cache une multitude de fichier (script.js?v=20070702,script.js?v=20070713, etc). Il n’empêche pas la mise en cache du fichier script.js.

    Seul inconvénient : c’est qu’a moins de connaitre et de pouvoir faire du rewriting, ma méthode vous oblige à nommer vos CSS et javascript en .php pour être interprété.

  3. Boris Says:

    Michael, nous ne voulons pas empêcher le browser de mettre en cache le fichier, nous voulons qu’il ne le télécharge que si il y a eu une modification. Si il n’y a pas eu de modification nous voulons qu’il utilise le cache.

    Le problème avec ta méthode, c’est que l’utilisateur va télécharger les fichiers à chaque fois, même quand c’est inutile, donc le chargement de la page sera plus long, et la charge serveur plus importante.

    Par contre, c’est vrai que les différentes versions des fichiers seront stockées jusqu’à ce qu’elles soient en général détruites par le navigateur, au bout d’un certain temps, selon la configuration de ce dernier.

  4. julien Says:

    C’est la mème technique utilisée en flash pour eviter la mise en cache des fichiers externes loadé dans l’animation :)

    Good !

  5. JAmes Says:

    Le @ empêche tout simplement à une éventuelle erreur de s’afficher. Ainsi, il est vrai que si le fichier n’existe pas, aucune erreur n’apparaîtra. Mais cela va cacher d’autres erreurs si elles doivent arriver (par exemple, un problème de droits). Il vaudrait donc mieux utiliser file_exists()

  6. JAmes Says:

    Mais je retient l’astuce ! Merci !

  7. Eric Says:

    Et pourquoi ne pas mettre le numéro de version de l’application comme paramètre au lieu de la date ? Ainsi, après chaque livraison d’une nouvelle version de l’application, le navigateur va charger une fois et une seule les fichiers css et js, que ceux-ci aient changé ou pas.

    Ainsi, on garde l’optimisation de laisser ces fichiers dans la cache du navigateur tout en permettant un rafraichissement des css et js au besoin.

  8. Bil Says:

    C’est parfait, c’est l’astuce qu’il me fallait… Enfin presque, je viens de faire des tests avec le paramètre GET le fichier (.css pour ma part) est chargé a chaque fois

    Procédure du test:

    •affectation d’un paramètre en dur au fichier css (……….screen.css?lastUpdate=110920081432) (jjmmaaaahhmm)
    •(re)chargement de ma page avec un petit F5
    •modification de mon css puis envoie sur le server. (le paramètre GET est toujours : lastUpdate=110920081432)
    •chargement de ma page en navigant vers cette page à l’aide de lien (pas de F5 donc pas de rechargement compet de la page) ==> les modifications du css ont été prise en compte donc dans l’absolue la technique marche mais ne se sert plus du cache

  9. Ben Says:

    Excellent ! Merci de l’astuce, depuis le temps que je cherchais une solution à ça !

  10. ski Says:

    Et bah ça c’est du code malin… ;-)