navigateur Force pour effacer le cache
https://stackoverflow.com/questions/1922910
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Est-il possible que je peux mettre un peu de code sur ma page alors quand quelqu'un visite un site, il efface le cache du navigateur, afin qu'ils puissent voir les modifications?
Langues utilisées:. ASP.NET, VB.NET, et bien sûr HTML, CSS et jQuery
La solution
Si cela est des changements de .css et .js, une façon est de la « cache busting » est quelque chose comme en annexant « _versionNo » au nom de fichier pour chaque version. Par exemple:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Ou bien le faire après le nom du fichier:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Vous pouvez consulter ce lien de rel="noreferrer"> pour voir comment il pourrait travailler .
Autres conseils
Regardez dans le cache-control et expire balise META.
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
Une autre pratique courante consiste à ajouter des chaînes en constante évolution à la fin des fichiers demandés. Par exemple:
<script type="text/javascript" src="main.js?v=12392823"></script>
Mise à jour 2012
Ceci est une vieille question, mais je pense qu'il a besoin d'un plus à répondre à ce jour parce que maintenant il y a un moyen d'avoir plus de contrôle de la mise en cache du site.
hors ligne des applications Web (ce qui est vraiment un site Web HTML5) applicationCache.swapCache() peut être utilisé pour mettre à jour la version en cache de votre site sans la nécessité de recharger manuellement la page.
Ceci est un exemple de code de Guide du débutant du sur HTML5 Rocks expliquant comment mettre à jour les utilisateurs à la nouvelle version de votre site:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
Voir aussi Utilisation du cache sur l'application Mozilla Developer Network pour plus d'informations.
Mise à jour 2016
Les choses changent rapidement sur le Web. On a posé cette question en 2009 et en 2012 a mis à jour une nouvelle façon de gérer le problème décrit dans la question. 4 autres années ont passé et il semble maintenant qu'il est déjà dépréciée. Merci à cgaldiolo pour le signaler dans les commentaires.
À l'heure actuelle, à partir de Juillet 2016, le standard HTML, de la section 7.9, les applications Web hors ligne comprend un avertissement de deprecation:
Cette fonction est en train d'être retiré de la plate-forme Web. (Ceci est un long processus qui prend plusieurs années.) En utilisant l'un des hors ligne fonctionnalités de l'application Web à l'heure actuelle est fortement déconseillée. Utilisez les travailleurs des services à la place.
donc fait Utilisation du cache sur l'application Mozilla Developer Network que j'ai parlé en 2012:
Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que certains navigateurs peuvent encore soutenir, il est en train de être abandonné. Ne pas l'utiliser dans les anciens ou les nouveaux projets. Pages ou des applications Web l'utiliser peut se rompre à tout moment.
Pas en tant que tel. Une méthode consiste à envoyer les en-têtes appropriés lors de la livraison de contenu pour forcer le navigateur à recharger:
Faire en sorte une page Web n'est pas mis en cache, dans tous les navigateurs.
Si votre recherche "cache header" ou quelque chose similaire sur, vous trouverez des exemples spécifiques ASP.NET.
Une autre, moins propre mais parfois seule façon si vous ne pouvez pas contrôler les en-têtes sur le côté serveur, est l'ajout d'un paramètre GET aléatoire à la ressource qui est appelé:
myimage.gif?random=1923849839
Ressources statiques mise en cache à droite serait de paramètres utiliser la requête avec la valeur de chaque déploiement ou une version fichier. Cela aura pour effet de compensation cache après chaque déploiement.
/Content/css/Site.css?version={FileVersionNumber}
Voici par exemple ASP.NET MVC.
<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />
Ne pas oublier de mettre à jour la version de montage.
J'ai eu problème et c'est similaire comment je l'ai résolu:
-
Dans le fichier
index.htmlJ'ai ajouté manifeste:<html manifest="cache.manifest"> -
script inclus section
<head>mise à jour du cache:<script type="text/javascript" src="update_cache.js"></script> -
Dans la section
<body>J'ai inséré la fonction onload:<body onload="checkForUpdate()"> -
cache.manifestJ'ai mis tous les fichiers que je veux mettre en cache. Il est important maintenant que cela fonctionne dans mon cas (Apache) tout en mettant à jour chaque fois que le commentaire « version ». Il est également une option pour nommer les fichiers avec « ? Ver = 001 » ou quelque chose à la fin du nom, mais il est pas besoin . Changement de juste# version 1.01déclenche l'événement de mise à jour du cache.CACHE MANIFEST # version 1.01 style.css imgs/logo.png #all other filesIl est important d'inclure 1., 2. et 3. Les points uniquement dans index.html. Dans le cas contraire
GET http://foo.bar/resource.ext net::ERR_FAILEDse produit parce que chaque fichier "enfant" tente de mettre en cache la page alors que la page est déjà mis en mémoire cache.
-
Dans le fichier
update_cache.jsJ'ai mis ce code:function checkForUpdate() { if (window.applicationCache != undefined && window.applicationCache != null) { window.applicationCache.addEventListener('updateready', updateApplication); } } function updateApplication(event) { if (window.applicationCache.status != 4) return; window.applicationCache.removeEventListener('updateready', updateApplication); window.applicationCache.swapCache(); window.location.reload(); }
Maintenant, vous changer simplement les fichiers et vous en manifeste devez mettre à jour la version commentaire. Maintenant, visiter la page index.html mettra à jour le cache.
Les parties de solution ne sont pas la mienne, mais je les ai trouvés par Internet et mis ensemble pour que cela fonctionne.
J'ai eu un cas où je prendrais des photos de clients en ligne et aurait besoin de mettre à jour la div si une photo est modifiée. Navigateur montrait encore la vieille photo. Alors je le hack d'appeler une variable aléatoire GET, ce qui serait unique à chaque fois. Ici, il est si elle pourrait aider tout le monde
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
EDIT Comme l'a souligné par d'autres, à la suite est une solution beaucoup plus efficace car il recharger les images que lorsqu'ils sont modifiés, en identifiant ce changement par la taille du fichier:
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"
Beaucoup de réponses sont manquantes au point - la plupart des développeurs sont bien conscients que de désactiver le cache est inefficace. Cependant, il y a beaucoup de circonstances communes où l'efficacité est sans importance et le comportement du cache par défaut est mal cassé.
notamment imbriquées, les tests de script itératif (la grande un!) Et cassé des solutions de contournement de logiciels tiers. Aucune des solutions données ici sont suffisantes pour répondre à ces scénarios communs. La plupart des navigateurs Web sont la mise en cache beaucoup trop agressif et ne fournissent aucun moyen judicieux pour éviter ces problèmes.
<meta http-equiv="pragma" content="no-cache" />
Voir aussi https: //stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images
Je ne sais pas si cela pourrait vraiment vous aider mais comment la mise en cache devrait fonctionner sur un navigateur. Lorsque la demande de navigateur un fichier, il doit toujours envoyer une demande au serveur, sauf si il y a un mode « hors ligne ». Le serveur va lire certains paramètres comme la date de modification ou ETAG.
Le serveur renvoie une réponse d'erreur 304 pour MODIFIE PAS et le navigateur devra utiliser son cache. Si l'ETAG ne valide pas sur le côté serveur ou la date de modification est inférieure à la date de modification en cours, le serveur doit retourner le nouveau contenu avec la nouvelle date de modification ou ETAG, ou les deux.
S'il n'y a pas de données de cache envoyées au navigateur, je suppose que le comportement est indéterminée, le navigateur peut ou ne peut pas mettre en cache le fichier qui ne disent pas comment ils sont mises en cache. Si vous définissez les paramètres de mise en cache dans la réponse qu'elle cache correctement vos fichiers et le serveur peut alors choisir de renvoyer une erreur 304 ou le nouveau contenu.
Voici comment cela devrait être fait. En utilisant le numéro params ou une version aléatoire dans urls est plus comme un hack qu'autre chose.
http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http: //www.xpertdeveloper. com / 2011/03 / dernière modification-header-vs-expireront-header-vs-ETAG /
Après la lecture, j'ai vu qu'il ya aussi une date expire. Si vous avez un problème, il est peut-être que vous avez une date expireront mise en place. En d'autres termes, lorsque le navigateur cache votre fichier, car il a une date d'expiration, il ne devrait pas avoir à demander à nouveau avant cette date. En d'autres termes, il ne demandera jamais le fichier sur le serveur et ne recevra jamais un 304 pas modifié. Il suffit d'utiliser le cache jusqu'à la date d'expiration est atteinte ou le cache est effacé.
Alors que je pense est, vous avez une sorte de date d'expiration et vous devez utiliser etags dernière modification ou un mélange de tout et assurez-vous qu'il n'y a pas de date expire.
Si les gens ont tendance à rafraîchir beaucoup et le fichier ne soit pas beaucoup changé, alors il pourrait être sage de définir une grande date d'expiration.
Mes 2 cents!
Mise à jour de l'URL aux œuvres suivantes pour moi:
/custom.js?id=1
En ajoutant un numéro unique après ?id= et incrémenter pour de nouveaux changements, les utilisateurs ne doivent pas appuyer sur CTRL + F5 pour actualiser le cache. Vous pouvez également ajouter la version de hachage ou une chaîne de l'heure ou Epoch après ?id=
Quelque chose comme ?id=1520606295
ici est la page MDSN sur la mise en cache dans ASP.NET.
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True
If Response.Cache.VaryByParams("Category") Then
'...
End If
Je mis en œuvre cette solution simple qui fonctionne pour moi (pas encore sur l'environnement de production):
function verificarNovaVersio() {
var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
$.ajax({
url: "./versio.txt"
, dataType: 'text'
, cache: false
, contentType: false
, processData: false
, type: 'post'
}).done(function(sVersioFitxer) {
console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
location.reload(true);
}
});
}
J'ai un petit fichier où se trouve le code html sont:
"versio.txt":
v00.5.0014
Cette fonction est appelée dans toutes mes pages, donc lors du chargement, il vérifie si la valeur de la version du localStorage est inférieure à la version actuelle et fait un
location.reload(true);
... pour forcer reload du serveur à la place du cache.
(évidemment, au lieu de localStorage vous pouvez utiliser des cookies ou autre stockage client persistant)
J'ai opté pour cette solution pour sa simplicité, parce que mantaining un seul fichier « versio.txt » forcera le site complet à recharger.
La méthode queryString est difficile à mettre en œuvre et est également mis en mémoire cache (si vous changez de version 1.1 à une version précédente chargera à partir du cache, cela signifie que le cache n'est pas vidé, en gardant toutes les versions précédentes au cache).
Je suis un peu novice et j'apreciate votre chèque professionnel et examen pour assurer ma méthode est une bonne approche.
it helps.
En plus de la mise en cache-control: no-cache, vous devez également définir l'en-tête Expires à -1 si vous voulez la copie locale à rafraîchir à chaque fois (certaines versions de IE semblent exiger cela)
Voir HTTP Cache - vérifier avec le serveur, l'envoi de toujours If-Modified-Since
Il y a un truc qui peut être utilisés.Procédé astuce consiste à ajouter un paramètre / chaîne au nom de fichier dans la balise de script et le modifier lorsque vous produisez des modifications.
<script src="myfile.js?version=1.0.0"></script>
Le navigateur interprète toute la chaîne comme le chemin du fichier, même si ce qui vient après le « ? » sont des paramètres. Donc, wat arrive est maintenant que la prochaine fois que vous mettez à jour votre fichier il suffit de changer le numéro dans la balise de script sur votre site (exemple <script src="myfile.js?version=1.0.1"></script>) et chaque navigateur des utilisateurs verra le fichier a changé et saisir une nouvelle copie.
Navigateurs de force pour effacer le cache ou rechargent les données correctes? Je l'ai essayé la plupart des solutions décrites dans stackoverflow, un travail, mais après un peu de temps, il ne cache finalement et afficher le script chargé précédent ou d'un fichier. Y at-il une autre façon qui videz le cache (css, js, etc.) et de travailler réellement sur tous les navigateurs?
J'ai trouvé jusqu'à présent que les ressources spécifiques peuvent être rechargées individuellement si vous modifiez la date et l'heure sur vos fichiers sur le serveur. « Cache de compensation » n'est pas aussi facile qu'il devrait être. Au lieu d'effacer le cache sur mon navigateur, je me suis aperçu que « toucher » les fichiers du serveur mises en cache réellement changer la date et l'heure du fichier source mises en cache sur le serveur (testé sur Edge, Chrome et Firefox) et la plupart des navigateurs télécharger automatiquement les plus nouvelle copie actuelle de ce qui est sur votre serveur (code, graphiques multimédia tout aussi). Je suggère que vous venez de copier les scripts les plus récents sur le serveur et « faire la bonne chose touche » solution avant que votre programme fonctionne, il va changer la date de tous vos fichiers de problème à une date la plus actuelle et le temps , il télécharge une nouvelle copie à votre navigateur:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>
puis ... le reste de votre programme ...
Il m'a fallu un certain temps pour résoudre ce problème (autant de navigateurs agissent différemment à différentes commandes, mais ils ont tous le temps de vérification des fichiers et comparer à votre copie téléchargée dans votre navigateur, si différente date et l'heure, fera le rafraîchissement) Si vous ne pouvez pas aller dans le bon sens supposé, il y a toujours une autre solution utilisable et mieux à elle. Meilleures salutations et le camping heureux. Par la touche de navigation (); ou alternatives travaillent dans de nombreux langages de programmation javascript inclus dans bash sh php et vous pouvez inclure ou les appeler en html.
Voulez-vous vider le cache, ou tout simplement vous assurer que votre page en cours (changé?) Ne sont pas mises en cache?
Dans ce dernier cas, il doit être aussi simple que
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
