Existe-t-il un moyen de forcer les navigateurs à actualiser/télécharger des images?
J'ai un problème lorsque les utilisateurs signalent que leurs images ne sont pas téléchargées et que les anciennes sont toujours là. En regardant de plus près, les nouvelles images sont là, elles ont juste le même nom que l’ancienne. Ce que je fais sur le téléchargement, c’est que je renomme les images à des fins de référencement. Lorsqu'ils suppriment une image, l'ancien index devient disponible et est réutilisé. Par conséquent, il porte le même nom d'image.
Existe-t-il un moyen (j'ai pensé qu'il pourrait y avoir une balise méta pour cela) pour dire au navigateur de ne pas utiliser son cahce?
La meilleure solution consiste à renommer l’image en quelque chose de totalement nouveau. Je vais travailler là-dessus, mais entre-temps, la solution est rapide, tandis que je travaille sur le plus gros problème.
Ajoutez une chaîne de requête avec un numéro unique arbitraire (ou heure, ou numéro de version, etc.):
<img src="image.png?80172489074" alt="a cool image" />
Cela entraînera une nouvelle demande, en raison de l'URL différente.
C'est dur. Vous voulez vraiment que les images soient mises en cache, mais vous ne voulez pas les mettre en cache une fois que de nouvelles sont disponibles:
- L'utilisation d'en-tête Expires avec une date passée empêche toute mise en cache. Mal
- L'ajout d'un paramètre "contournement du cache"? 342038402 peut résoudre le problème, mais peut également empêcher la mise en cache de l'image, ce qui n'est pas ce que vous souhaitez. Mal.
- Utiliser l'en-tête Expires avec une courte durée (disons 1 heure) expire c'est mieux ... après une heure, l'utilisateur verra l'image, mais votre serveur Web n'aura pas à la servir à chaque fois. Compromis, mais quelle heure fonctionne? Pas vraiment faisable.
La solution? Je peux penser à deux bonnes options:
- Regardez dans les eTags et votre capacité à les utiliser. Ceux-ci sont conçus pour cette situation. Le navigateur demandera explicitement à votre serveur si le fichier est à jour ou non. Vous pouvez simplement l'activer dans Apache si vous ne l'avez pas déjà prêt.
- Créez une nouvelle URL pour chaque nouvelle image (et utilisez un en-tête de date d'expiration très éloignée). C'est ce sur quoi vous travaillez.
Vous pouvez mettre http-equiv dans la balise <meta> qui indiquera au navigateur de ne pas utiliser le cache (ou même mieux - utilisez-le de manière définie), mais il est préférable de configurer le serveur pour envoyer les en-têtes http cache appropriés. Découvrez article sur la mise en cache .
Cependant, certains navigateurs ne prennent peut-être pas en charge la totalité de la norme http, mais je pense que c'est la solution.
Ajoutez la date/heure actuelle à l'image src:
<img src="yourImage.png?v=<?php echo Date("Y.m.d.G.i.s")?>" />
vous pouvez contrôler le comportement du cache en jouant avec les en-têtes HTTP.
définir dans le passé l'en-tête expires obligerait le navigateur à ne pas utiliser la version en cache.
Expires: Sat, 26 Jul 1997 05:00:00 GMT
Vous pouvez consulter le RFC pour avoir plus de détails.
dans PHP, vous pouvez utiliser cette astuce
<img src="image.png?<?php echo time(); ?>" />
La fonction time () affiche l'horodatage actuel. Chaque chargement de page est différent. Donc, ce code trompe le navigateur: il lit un autre chemin et "pense" que l'image est modifiée depuis la dernière visite du site par l'utilisateur. Et il doit le télécharger à nouveau, au lieu d'utiliser celui du cache.
Si vous regardez les données échangées entre votre navigateur et le serveur, vous verrez que le navigateur enverra une demande HTTP HEAD pour les images. Le résultat contiendra l'heure de modification (mais pas les données d'image réelles). Assurez-vous que cette heure change si l'image change sur le serveur et que le navigateur doit télécharger à nouveau l'image.
Dans PHP, vous pouvez envoyer un nombre aléatoire ou l’horodatage actuel:
<img src="image.jpg?<?=Date('U')?>">
ou
<img src="image.jpg?<?=Rand(1,32000)?>">
Allez au hasard. Il suffit d’utiliser un nombre aléatoire et de l’ajouter au nom de fichier image.
<img src="image.jpg?<?=Rand(1,1000000)?>">