Mise en cache de fichiers html php et css

**12monkeys** · 11/06/2007, 23h45

Bonsoir

Je ne sais pas trop si je pose ma question au bon endroit vu qu'il englobe plusieurs domaines.

Je voudrais savoir comment les navigateurs gèrent la mise en cache de certains fichiers particuliers : les css par exemple. Si on crée un fichier css avec le style de son site, puis qu'on le modifie par la suite, l'ancien fichier reste t'il en cache ? Ce qui poserait problème vu qu'on ne peut pas faire de mise à jour, c'est à dire cliquer sur le bouton actualiser... ça actualise que la page html et non le fichier css ?

Autre type de fichier : les php. Mon cas particulier : je souhaite faire un fichier php que je voudrais inclure dans mes pages web, c'est le même problème ?? ...

On ne peut pas mettre de balise meta ni dans l'un ni dans l'autre, alors ils risquent de ne pas s'afficher correctement. Les visiteurs risquent de ne pas voir les pages mises à jour ??

Merci de votre aide.

**magnus2005** · 12/06/2007, 09h28

Oui les navigateurs garde tous les fichiers en cache.
Le plus difficile à forcer la mis à jour est le fichier css En particulier sous IE
quand il veut pas le mettre à jour c est particulierement penible.

La gestion de la cache differe beaucoup selon les navigateurs.
Pour developer sous FF2 tu peux la desactiver et effacer tous les fichiers temporaires automatiquement (dans les options) quand tu quittes le navigateur pour tous remettre à plat.
Pour les appli en prod. tu peux mettre dans les en tete des pragma no cache et des update avec les META. Mais ce sont des directives purement indicative. Si un proxy cache ou IE n'a pas envie de les prendre en compte à ce moment la c est

En general sur 2 jours la cache temporaire est rarement conservé ce qui fait que le probleme n'arrive pas si souvent en production. Par contre quand tu developes c'est pas la meme chanson.

**12monkeys** · 12/06/2007, 14h19

Bonjour,

Pour les appli en prod.

Cette partie là je ne l'ai pas comprise...

En ce qui concerne la balise META je connais et j'utilise. Ma question était plus précise : en ce qui concerne les fichiers css et les fichiers php (dans le cas particulier que je donne : soit un fichier extérieur qu'on veut intégrer à une page html par integer). Pour ces fichiers on ne peut pas utiliser la balise META : on ne peut pas en mettre dans un fichier css ??? ni dans un fichier php à intégrer (une balise meta se retrouverait en plein milieu du code, entre les <body>...)

Alors est ce que cela pose réellement problème ?? Ce ne doit pas être une question neuve ou originale, cela est très important à mon sens et donc si cela pose problème cela a du être largement commenté ? (j'ai rien trouvé par recherche).

**magnus2005** · 12/06/2007, 15h19

Desolé pour les raccourcis :

pour les applications en productions c'est le contraire des applications en developement.
La css ne change pas souvent pour les applications en productions.

**12monkeys** · 13/06/2007, 14h01

Bonjour

J'ai bien trouvé ça :

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

En particulier :

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

Mais est ce que ceci va fonctionner dans un fichier css ? et dans un fichier php qui sera à inclure au milieu d'un autre ???

Mes questionnements ne semblent pas soulever beaucoup de commentaires !! Alors que cela me semble quand même être une question primordiale : si un visiteur ne peut pas voir un site à jour parce que les fichiers css et php "à inclure" restent dans le cache pendant plusieurs voire semaines !!?!??!?

**Bisûnûrs** · 13/06/2007, 14h12

Une manière infaillible est de mettre un timestamp derrière l'appel de ton fichier.

Exemple en PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="style.css?<?=date('YmdHis')?>" type="text/css" />

**12monkeys** · 13/06/2007, 16h53

Merci de ta réponse,

C'est comme ça que vous faites ou que font les pros ?

Faut il noter simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?=date('YmdHis')?>

ou remplacer le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'YmdHis'

par une date ? Et qu'est ce que ça signifie. Je pense : Y year ; m month ; d day ; H houre ; mais le reste ? i et s ??

J'ai recherché : le timestamp ça donne le temps "Unix" le nombre de secondes écoulées depuis 1970... Pour ma curiosité personnelle comment ça marche exactement, enfin qu'est ce que ça fait pour qu'on ai pas le fichier en cache qui soit recherché ?

Merci

**Bisûnûrs** · 13/06/2007, 17h07

Envoyé par 12monkeys

C'est comme ça que vous faites ou que font les pros ?

En tout cas c'est comme ça qu'il faut faire pour que ça fonctionne dans tous les cas.

Envoyé par 12monkeys

Faut il noter simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?=date('YmdHis')?>

ou remplacer le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'YmdHis'

par une date ? Et qu'est ce que ça signifie. Je pense : Y year ; m month ; d day ; H houre ; mais le reste ? i et s ??

J'ai recherché : le timestamp ça donne le temps "Unix" le nombre de secondes écoulées depuis 1970... Pour ma curiosité personnelle comment ça marche exactement, enfin qu'est ce que ça fait pour qu'on ai pas le fichier en cache qui soit recherché ?

Merci

Pour comprendre la fonction date(), c'est ici que ça se passe :

http://fr2.php.net/manual/fr/function.date.php

Donc tu laisses le code tel qu'il est, la fonction date() va rajouter derrière le fichier la date courante 'AnnéeMoisJourHeureMinuteSeconde'.

Ce qui va ressembler à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="style.css?20070613170531" type="text/css" />

Ca ne mettra pas le fichier en cache, parce qu'à chaque fois que tu vas faire appel à la page, le timestamp derrière le fichier aura changé, donc ton navigateur considèrera qu'il ne s'agit pas du même du coup il va le retélécharger.

**12monkeys** · 13/06/2007, 17h34

Merci de cette réponse claire.

J'abuse

mais j'avais oublié de demander pour les fichiers php en include ? On peut faire comme ça ??

<?php
include 'vars.php?=date('YmdHis')';
?>

**Bisûnûrs** · 13/06/2007, 17h59

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

include 'vars.php?'.date('YmdHis');

**marcha** · 13/06/2007, 20h24

Salut tous le monde,

Envoyé par 12monkeys

...pour les fichiers php en include ? On peut faire comme ça ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<?php
include 'vars.php?=date('YmdHis')';
?>

Non, l'inclusion se fait coté serveur, cela n'a rien à voir avec le cache
du client. tu n'a pas de soucis lors des includes tant que tu n'utilise
pas de système d'accélération php qui met en cache (précompilé)
les portions de code inclus.

Et pour revenir à la proposition de Bisûnûrs, le fait de mettre une date
qui change à chaque fois permet bien d'éviter que le navigateur mette
en cache le css, c'est très fiable, mais écrit tel quel c'est pas économique
au niveau de la bande passante, car le navigateur recharge les css
tous le temps, quand bien même celui-ci n'a pas changé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<link rel="stylesheet" href="style.css?<?=filemtime('styles.css')?>" type="text/css" />

En utilisant filemtime, on renvoie un timestamp unix qui correspond à la
date de dernière modification du fichier css, ceci à l'avantage de ne
pas changer tant que le css n'a pas changé, et de permettre une mise
en cache pour économiser la bande passante

**12monkeys** · 13/06/2007, 22h44

Bonsoir

Envoyé par marcha

Non, l'inclusion se fait coté serveur, cela n'a rien à voir avec le cache
du client. tu n'a pas de soucis lors des includes tant que tu n'utilise
pas de système d'accélération php qui met en cache (précompilé)
les portions de code inclus.

Ok, merci, je n'y aurais pas pensé...

Et pour revenir à la proposition de Bisûnûrs, le fait de mettre une date
qui change à chaque fois permet bien d'éviter que le navigateur mette
en cache le css, c'est très fiable, mais écrit tel quel c'est pas économique
au niveau de la bande passante, car le navigateur recharge les css
tous le temps, quand bien même celui-ci n'a pas changé.

En y réfléchissant ce soir je me suis dit ça et j'allais poster pour poser la question

En utilisant filemtime, on renvoie un timestamp unix qui correspond à la
date de dernière modification du fichier css, ceci à l'avantage de ne
pas changer tant que le css n'a pas changé, et de permettre une mise
en cache pour économiser la bande passante

Ben en fait c'est ce que je cherche...

Merci de votre aide à tous...

**magnus2005** · 14/06/2007, 09h45

Excellent le filetime j'y avais jamais pensé ?

Du coup la méthode du timestamp devient nettement plus intéressante.
En outre pour l'appliquer a tous les fichiers (en particulier pour les .js)

**12monkeys** · 05/07/2007, 18h57

Bonjour,

J'ai enlevé "Résolu" parce que j'ai enfin testé toutes ces informations...

Et ... ça ne fonctionne pas...

En ce qui concerne les include, ils se font peut être coté serveur mais vu que le contenu html qui est inclus avec include est sauvegardé avec la page en cache, si on ne réactualise pas on affiche le fichier en cache et non le fichier réactualisé.

Il en est de même pour le code php dans une page.

Enfin le "filemtime" ne fonctionne pas non plus pour ce que j'ai indiqué ci dessus : le code php génère du code html qui est mis en cache, c'est ce qui est en cache qui est affiché sauf à actualiser la page.

De tout ceci j'ai fait des tests sur un site de free, voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Titre</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Expires" content="Fri, 1 Sept 2007 07:00:00 GMT">
<link rel="stylesheet" href="style.css?<?=filemtime('style.css')?>" type="text/css">
 
</head>
 
<body>
 
bonjour aurevoir rebonjour blablabla rerireirieri
 
<?php echo '<br><br> ceci est un essai en php - ceci est la modification <br> autre modif'; ?>
 
<?php include 'inclusion.php'; ?>
 
</body>
</html>

Code Fichier Include :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<br><br><br><br>ceci est une inclusion ; ceci est une inclusion ; ceci est une inclusion.
<br><br><br>

Alors y'a t'il une chose que j'ai mal compris ?? ou une erreur dans mon code...

Bref il me semble qu'il ne reste que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="Expires" content="Fri, 1 Sept 2007 07:00:00 GMT">

**marcha** · 05/07/2007, 19h07

Salut,

A ce stade je te conseil de regarder le traffic http pour voir ce qu'il y a dans les
entête. Savoir si la requête est réellement faite ou pas. si oui, regarder si il s'agit d'un GET, HEAD ou si il y a un If Modified Since. Observe les en-têtes Cache-Control
et Pragma.

Installe LiveHttpHeaders ou FireBug sur ton FireFox et regarde ce qu'il se passe.

**12monkeys** · 05/07/2007, 19h11

Désolé

J'ai du écrire ces bétises pour me rendre compte de leur énormité ! Je confonds en fait la mise en cache des fichiers css et include... et le résultat que cela entraine dans la page qui, elle est mise en cache.

Me trompe-je ??

**magnus2005** · 05/07/2007, 19h28

J'utilise une méthode quasi infaillible pour les fichiers flash et java qui sont très souvent sujet à une mis en cache. C'est pas élégant mais c'est très efficace. Voila j'ai fais une méthode qui va chercher le fichier le plus récent du répertoire selon un certain pattern de départ. La fin de nom de fichier je met toujours un timestamp.(Exemple avec la style.css ça donne style200707051925.css). J'ai fait un script ANT qui me fait tous ça automatiquement quand je build les fichiers applet mais fondamentalement ça fonctionne pour tous le fichiers (j'ai fais ça pour les .swf aussi).
Avantage :

en lisant le code source on sait si c'est le bon fichier.
ça optimise la gestion de la cache du coup ça reduit la charge reseau et ça charge plus vite.

Désavantage :

Consomme un peu plus de ressource CPU sur le serveur

**blueice** · 05/07/2007, 19h30

PHP s'exécute côté serveur, donc la page est rechargée à chaque fois, donc aucun problème de cache !
Si tu fais une modification elle sera automatiquement prise en compte.

Si tu veux résoudre le problème, il suffit de rendre ta feuille de style dynamique. "styles.php"

**12monkeys** · 05/07/2007, 19h48

Envoyé par blueice

Si tu fais une modification elle sera automatiquement prise en compte.

Ben ça dépend !

Et c'est ce que je n'avais pas compris tout de suite : je vais au pire : si la page html n'a pas de "meta expire" que l'internaute ne fais pas "actualiser" et qu'il a un cache gigantesque ça pourrait durer des semaines avant qu'il ne voit ces mises à jour.

Non en fait plus je réfléchis et moins je comprends...

Dans le cadre du filemtime pour un css : le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?=filemtime('style.css')?>

donne par exemple dans le fichier html après interptation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

href="style.css?1183653418"

c'est à dire si on affiche la page et qu'on affiche la source.

Ce que j'ai fait lors de mes tests : j'ai quitté la page html en question, puis j'ai modifié le fichier css, et puis je suis retourné sur la page html, la modification ne s'est pas appliquée. En affichant la source de la page, le code html du code php, soit href="style.css?1183653418" reste le même, en faisant actualiser et en revenant sur la source, alors et seulement là cette suite de chiffres est modifiée.
Logique, puisque le résultat html produit par le code php est mis en cache, que le php soit modifié coté serveur, le navigateur s'en fou puisqu'il cherche la page dans le cache...

Ai-je bien compris là ??

**magnus2005** · 05/07/2007, 19h54

Il me semble que tu as bien compris,
Il faut que tu appliques le système de timestamp à l'URL qui donne accès a ta page.
Ce genre de problème arrive souvent avec les proxy cache.
http://www.mysite.fr/test.html?id=3213132123
Perso j'ajoute le systeme currenttime en milliseconde a la fin de chaque URL

Mise en cache de fichiers html php et css

HTML

Discussions similaires

Partager

Partager