Archive for July, 2007

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

Friday, 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 ;-)