Forcer le navigateur à effacer la cache

regardez dans la balise cache-control et la balise expires 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 est d'ajouter constamment des chaînes à la fin des fichiers demandés. Par exemple:

<script type="text/javascript" src="main.js?v=12392823"></script>

mise à jour 2012

C'est une vieille question mais je pense qu'elle a besoin d'une réponse plus à jour parce que maintenant il y a un moyen d'avoir plus de contrôle de la mise en cache de site web.

In Offline Web Applications (qui est vraiment tout HTML5 site web) applicationCache.swapCache() peut être utilisé pour mettre à jour la version mise en cache de votre site Web sans avoir à recharger manuellement la page.

c'est un code exemple tiré du Guide du Débutant Pour L'utilisation de L'Application Cache sur HTML5 Rocks expliquant comment mettre à jour les utilisateurs vers la plus récente 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 en utilisant le cache d'application sur Mozilla Developer Network pour plus d'informations.

mise à jour 2016

les choses changent rapidement sur le Web. Cette question a été posée en 2009 et en 2012 j'ai posté une mise à jour sur une nouvelle façon de traiter le problème décrit dans la question. Quatre autres années se sont écoulées et il semble maintenant qu'elle soit déjà dépréciée. Merci à cgaldiolo pour l'avoir souligné dans les commentaires.

actuellement, en date de juillet 2016, la norme HTML, Section 7.9, applications Web hors ligne comprend un avertissement de dépréciation:

cette fonctionnalité est en cours de suppression de la plate-forme Web. (C'est un long processus qui prend plusieurs années.) En utilisant les les fonctions d'application Web hors ligne en ce moment sont fortement déconseillées. Utilisez plutôt des travailleurs des services.

ainsi que en utilisant l'application cache sur Mozilla Developer Network que j'ai référencé en 2012:

déprécié

cette caractéristique a été retirée des normes Web. Bien que certains navigateurs peuvent encore le soutenir, c'est dans le processus de d'être supprimé. Ne l'utilisez pas dans des projets anciens ou nouveaux. Pages ou applications Web à l'aide, elle peut se briser à tout moment.

Voir aussi bogue 1204581 - Ajouter un avis de dépréciation pour AppCache si le service worker fetch interception est activé .

pas en tant que tel. Une méthode consiste à envoyer les en-têtes appropriés lors de la livraison du contenu pour forcer le navigateur à recharger:

S'assurer qu'une page web n'est pas mise en cache, sur tous les navigateurs.

si votre recherche pour "cache header" ou quelque chose de similaire ici sur SO, vous trouverez ASP.NET exemples spécifiques.

un autre, moins propre mais parfois seulement de manière si vous ne pouvez pas contrôler les en-têtes du côté du serveur, est ajouter un paramètre GET aléatoire à la ressource qui est appelée:

myimage.gif?random=1923849839

Pour ressources statiques droit de mise en cache serait de utiliser les paramètres de requête avec la valeur de chaque fichier ou de déploiement de la version. Cela aura pour effet de vider le cache après chaque déploiement.

/Content/css/Site.css?version={FileVersionNumber}

Voici ASP.NET exemple MVC.

<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

n'oubliez pas de mettre à jour la version assembly.

j'ai eu un problème similaire et c'est comme ça que je l'ai résolu:

1. Dans index.html fichier j'ai ajouté manifeste:

   <html manifest="cache.manifest">
   

2. dans la section <head> script inclus mettant à jour le cache:

   <script type="text/javascript" src="update_cache.js"></script>
   

3. dans <body> section j'ai inséré la fonction onload:

   <body onload="checkForUpdate()">
   

4. Dans cache.manifest j'ai mis tous les fichiers que je veux mettre en cache. Il est important maintenant que cela fonctionne dans mon cas (Apache) juste en mettant à jour chaque fois le commentaire "version". C'est aussi une option pour nommer les fichiers avec "?ver=001" ou quelque chose à la fin du nom, mais c'est pas besoin . Changer juste # version 1.01 déclenche un événement de mise à jour de cache.

   CACHE MANIFEST
   # version 1.01
   style.css
   imgs/logo.png
   #all other files
   

   il est important d'inclure 1., 2. et 3. points seulement dans l'index.HTML. Autrement

   GET http://foo.bar/resource.ext net::ERR_FAILED
   

   se produit parce que chaque fichier" enfant " essaie de mettre en cache la page alors que la page est déjà mise en cache.

5. Dans update_cache.js fichier j'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, il vous suffit de changer les fichiers et dans le Manifeste, vous devez mettre à jour le commentaire de version. Maintenant, nous visitons index.la page html mettra à jour le cache.

les parties de la solution ne sont pas à moi mais je les ai trouvés sur internet et assemblés pour que ça marche.

j'ai eu un cas où je prendrais des photos de clients en ligne et aurais besoin de mettre à jour le div si une photo est changée. Le navigateur montrait encore l'Ancienne photo. Donc j'ai utilisé le hack d'appeler une variable aléatoire, qui serait unique à chaque fois. Ici, il est si elle pourrait aider n'importe qui

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

EDIT Comme d'autres l'ont souligné, la solution suivante est beaucoup plus efficace car elle ne rechargera les images que lorsqu'elles seront modifiées, en identifiant ce changement par le fichier taille:

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

<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 c'est comme ça que la mise en cache devrait fonctionner sur n'importe quel navigateur. Lorsque le navigateur demande un fichier, il faut toujours envoyer une demande au serveur, sauf s'il est "hors ligne" mode. Le serveur Lira des paramètres comme date modified ou etags.

le serveur retournera une réponse d'erreur 304 pour non modifié et le navigateur devra utiliser son cache. Si l'etag ne valide pas du côté du serveur ou si la date modifiée est en dessous de la date de modification actuelle, le serveur doit retourner le nouveau contenu avec la nouvelle date de modification ou les métabalises électroniques ou les deux.

S'il n'y a pas de données mises en cache envoyées au navigateur, je suppose que le comportement est indéterminé, le navigateur peut ou non mettre en cache le fichier qui ne dit pas comment ils sont mis en cache. Si vous définissez les paramètres de mise en cache dans la réponse, il va mettre vos fichiers en cache correctement et le serveur peut alors choisir de retourner une erreur 304, ou le nouveau contenu.

C'est comme ça doit être fait. Utiliser des params aléatoires ou des numéros de version dans les urls est plus comme un piratage que n'importe quoi.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs-expire-header-vs-etag/

après lecture, j'ai vu qu'il y a aussi une date d'expiration. Si vous avez un problème, il se peut que vous ayez fixé une date d'expiration. En d'autres termes, lorsque le navigateur cache votre fichier, puisqu'il a une date d'expiration, il ne devrait pas avoir à le demander à nouveau avant cette date. En d'autres termes, il ne demandera jamais le fichier au serveur et ne recevra jamais un 304 non modifié. Il va simplement utiliser le cache jusqu'à ce que la date d'expiration ou le cache est effacé.

donc à mon avis, vous avez une sorte de date d'expiration et vous devriez utiliser les etags de dernière modification ou un mélange de tout cela et assurez-vous qu'il n'y a pas la date d'expiration.

si les gens ont tendance à rafraîchir beaucoup et que le fichier ne change pas beaucoup, alors il pourrait être sage de fixer une date d'expiration importante.

mes 2 cents!

beaucoup de réponses manquent le point - la plupart des développeurs sont bien conscients que désactiver le cache est inefficace. Cependant, il existe de nombreuses circonstances communes dans lesquelles l'efficacité est sans importance et le comportement de cache par défaut est gravement cassé.

ceux-ci comprennent imbriqué, itérative script test (Le Grand!) et des solutions de rechange au logiciel d'une tierce partie. Aucune des solutions présentées ici n'est adéquate pour faire face à de tels scénarios communs. La plupart des navigateurs web sont beaucoup trop la mise en cache agressive et ne fournissent aucun moyen raisonnable d'éviter ces problèmes.

mise à Jour de l'URL à la suivante fonctionne pour moi:

/custom.js?id=1

en ajoutant un numéro unique après ?id= et en l'incrémentant pour de nouvelles modifications, les utilisateurs n'ont pas à appuyer sur CTRL + F5 pour rafraîchir le cache. Vous pouvez aussi ajouter la version hash ou string de l'époque actuelle après ?id=

quelque chose comme ?id=1520606295

Ici est le MDSN page sur la configuration de 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

j'ai 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 localisé où se trouve le html:

" versio.txt":

v00.5.0014

cette fonction est appelée dans toutes mes pages, donc lors du chargement elle vérifie si la valeur de la version de localStorage est inférieure à la version actuelle et fait un

location.reload(true);

... pour forcer le rechargement de serveur au lieu de la cachette.

(évidemment, au lieu de localStorage vous pouvez utiliser des cookies ou d'autres Stockage client persistant)

j'ai opté pour cette solution pour sa simplicité, parce que ne comportant qu'un seul fichier" versio.txt " va forcer le site entier à se recharger.

la méthode queryString est difficile à implémenter et est aussi mise en cache (si vous changez de v1.1 à une version précédente va charger à partir du cache, alors cela signifie que le cache est non rincé, en gardant toutes les versions précédentes en cache).

je suis un petit débutant et j'apprécierais votre contrôle et révision professionnels pour s'assurer que ma méthode est une bonne approche.

J'espère que ça aidera.

en plus de définir Cache-control: no-cache, vous devriez également définir L'en-tête Expires à -1 si vous souhaitez que la copie locale soit rafraîchie à chaque fois (certaines versions D'IE semblent l'exiger).

Voir HTTP Cache - vérifier avec le serveur, toujours de l'envoi de Si-Modified-since

Il y a un truc qui peut être utilisé.Le truc est d'ajouter un paramètre / chaîne de caractères au nom du fichier dans la balise script et de le changer lorsque vous modifiez le fichier.

<script src="myfile.js?version=1.0.0"></script>

le navigateur interprète la chaîne entière comme le chemin du fichier même si ce qui vient après le"?"sont des paramètres. Donc, wat arrive maintenant est 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 web (exemple <script src="myfile.js?version=1.0.1"></script> ) et chaque le navigateur des utilisateurs va voir que le fichier a changé et obtenir une nouvelle copie.

forcer les navigateurs à vider le cache ou à recharger les données correctes? j'ai essayé la plupart des solutions décrites dans stackoverflow, un peu de travail, mais après un peu de temps, il ne cache finalement et d'afficher le script ou le fichier chargé précédent. Est-il une autre façon de vider le cache (css, js, etc) et de travailler sur tous les navigateurs?

j'ai trouvé jusqu'à présent que des ressources spécifiques peuvent être rechargées individuellement si vous modifiez la date et l'heure vos fichiers sur le serveur. "Effacer la mémoire cache" n'est pas aussi facile qu'il devrait être. Au lieu d'effacer la cache sur mes navigateurs, j'ai réalisé que "toucher" les fichiers du serveur mis en cache va en fait changer la date et l'heure du fichier source mis en cache sur le serveur (testé sur Edge, Chrome et Firefox) et la plupart des navigateurs téléchargera automatiquement la copie la plus récente de whats sur votre serveur (code, graphiques tout multimédia aussi). Je vous suggère de simplement copier les scripts les plus récents sur le serveur et "ne le touchez chose" solution avant que votre programme fonctionne, donc il va changer la date de tous vos fichiers de problème à une date actuelle et l'heure, puis télécharger une nouvelle copie de votre navigateur:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

alors ... le reste de votre programme...

il m'a fallu un certain temps pour résoudre ce problème (comme de nombreux navigateurs agissent différemment de différentes commandes, mais ils vérifient tous l'heure des fichiers et comparent à votre copie téléchargée dans votre navigateur, si la date et l'heure différente, va faire le rafraîchissement), si vous ne pouvez pas aller dans le sens supposé juste, il y a toujours une autre solution utilisable et meilleure à elle. Meilleures salutations et camping heureux. Par la façon dont touch(); ou des alternatives de travail dans de nombreux langages de programmation inclusive en javascript bash, sh php et vous permet d'inclure ou d'appel en html.

voulez-vous vider le cache, ou juste vous assurer que votre courant (changé? la page n'est pas mise en cache?

si ce dernier, il doit être aussi simple que

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">