Browser zwingen, Cache zu leeren

Gibt es eine Möglichkeit, Code auf meine Seite zu setzen, damit beim Besuch einer Website der Browser-Cache geleert wird, damit er die Änderungen anzeigen kann?

Verwendete Sprachen: ASP.NET, VB.NET und natürlich HTML, CSS und jQuery.

Wenn es darum geht .cssund sich .jsändert, besteht eine Möglichkeit zum "Cache-Busting" darin _versionNo, dem Dateinamen für jede Version etwas wie " " anzuhängen. Zum Beispiel:

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.

Oder alternativ nach dem Dateinamen:

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.

Sie können diesen Link überprüfen, um zu sehen, wie es funktionieren könnte.

Schauen Sie in die Cache-Steuerung und das abgelaufene META-Tag.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Eine weitere gängige Vorgehensweise besteht darin, ständig wechselnde Zeichenfolgen an das Ende der angeforderten Dateien anzuhängen. Zum Beispiel:

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

Update 2012

Dies ist eine alte Frage, aber ich denke, sie muss aktueller beantwortet werden, da es jetzt eine Möglichkeit gibt, das Zwischenspeichern von Websites besser zu steuern.

In Offline-Webanwendungen (bei denen es sich eigentlich um jede HTML5-Website handelt) applicationCache.swapCache()kann die zwischengespeicherte Version Ihrer Website aktualisiert werden, ohne dass die Seite manuell neu geladen werden muss.

Dies ist ein Codebeispiel aus dem Anfängerhandbuch zur Verwendung des Anwendungscaches in HTML5 Rocks, in dem erläutert wird, wie Benutzer auf die neueste Version Ihrer Website aktualisiert werden:

// 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);

Weitere Informationen finden Sie unter Verwenden des Anwendungscaches im Mozilla Developer Network.

Update 2016

Im Web ändern sich die Dinge schnell. Diese Frage wurde 2009 gestellt und 2012 habe ich ein Update über eine neue Methode zur Behandlung des in der Frage beschriebenen Problems veröffentlicht. Weitere 4 Jahre vergingen und jetzt scheint es, dass es bereits veraltet ist. Vielen Dank an cgaldiolo für den Hinweis in den Kommentaren.

Derzeit enthält der HTML-Standard, Abschnitt 7.9, Offline-Webanwendungen , ab Juli 2016 eine Warnung zur Ablehnung:

Diese Funktion wird gerade von der Webplattform entfernt. (Dies ist ein langer Prozess, der viele Jahre dauert.) Von der Verwendung einer der Offline-Webanwendungsfunktionen zu diesem Zeitpunkt wird dringend abgeraten. Verwenden Sie stattdessen Servicemitarbeiter.

So auch die Verwendung des Anwendungscaches im Mozilla Developer Network, auf den ich 2012 verwiesen habe:

Veraltet
Diese Funktion wurde aus den Webstandards entfernt. Obwohl einige Browser dies möglicherweise noch unterstützen, wird es gerade gelöscht. Verwenden Sie es nicht in alten oder neuen Projekten. Seiten oder Web-Apps, die es verwenden, können jederzeit beschädigt werden.

Siehe auch Fehler 1204581 - Hinzufügen eines Verfallshinweises für AppCache, wenn das Abfangen von Service Worker-Abrufen aktiviert ist .

Nicht als solches. Eine Methode besteht darin, bei der Bereitstellung von Inhalten die entsprechenden Header zu senden, um den Browser zum erneuten Laden zu zwingen:

Stellen Sie sicher, dass eine Webseite nicht in allen Browsern zwischengespeichert wird.

Wenn Sie "cache header"hier auf SO nach etwas Ähnlichem suchen , finden Sie ASP.NET-spezifische Beispiele.

Eine andere, weniger saubere, aber manchmal nur Möglichkeit, die Header auf der Serverseite nicht zu steuern, besteht darin, der aufgerufenen Ressource einen zufälligen GET-Parameter hinzuzufügen:

myimage.gif?random=1923849839

Für statische Ressourcen besteht das richtige Caching darin, Abfrageparameter mit dem Wert jeder Bereitstellung oder Dateiversion zu verwenden. Dadurch wird der Cache nach jeder Bereitstellung geleert.

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

Hier ist ein Beispiel für ASP.NET MVC.

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

Vergessen Sie nicht, die Assembly-Version zu aktualisieren.

Ich hatte ein ähnliches Problem und so habe ich es gelöst:

1. In der index.htmlDatei habe ich Manifest hinzugefügt:

   <html manifest="cache.manifest">

2. Im <head>Abschnitt enthaltenes Skript, das den Cache aktualisiert:

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

3. Im <body>Abschnitt habe ich die Onload-Funktion eingefügt:

   <body onload="checkForUpdate()">

4. In cache.manifestich alle Dateien gesetzt haben möchte ich Cache. Es ist jetzt wichtig, dass es in meinem Fall (Apache) funktioniert, indem jedes Mal der "Versions" -Kommentar aktualisiert wird. Es ist auch eine Option, Dateien mit "? Ver = 001" oder etwas am Ende des Namens zu benennen, aber es wird nicht benötigt . Das Ändern # version 1.01löst nur ein Cache-Aktualisierungsereignis aus.

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

   Es ist wichtig, 1., 2. und 3. Punkte nur in index.html aufzunehmen. Andernfalls

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

   tritt auf, weil jede "untergeordnete" Datei versucht, die Seite zwischenzuspeichern, während die Seite bereits zwischengespeichert ist.

5. In die update_cache.jsDatei habe ich diesen Code eingefügt:

   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();
   }

Jetzt ändern Sie nur noch die Dateien und im Manifest müssen Sie den Versionskommentar aktualisieren. Wenn Sie jetzt die Seite index.html besuchen, wird der Cache aktualisiert.

Die Teile der Lösung sind nicht meine, aber ich habe sie über das Internet gefunden und zusammengestellt, damit es funktioniert.

Ich hatte einen Fall, in dem ich Fotos von Kunden online machte und die Div aktualisieren musste, wenn ein Foto geändert wurde. Der Browser zeigte immer noch das alte Foto. Also habe ich den Hack benutzt, eine zufällige GET-Variable aufzurufen, die jedes Mal eindeutig ist. Hier ist es, wenn es jemandem helfen könnte

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

BEARBEITEN Wie von anderen hervorgehoben, ist das Folgende eine viel effizientere Lösung, da Bilder nur dann neu geladen werden, wenn sie geändert werden, wobei diese Änderung anhand der Dateigröße identifiziert wird:

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

Viele Antworten verfehlen den Punkt - die meisten Entwickler sind sich bewusst, dass das Deaktivieren des Caches ineffizient ist. Es gibt jedoch viele häufige Umstände, in denen die Effizienz unwichtig ist und das Standard-Cache-Verhalten stark beeinträchtigt ist.

Dazu gehören verschachtelte, iterative Skripttests (das große!) Und fehlerhafte Problemumgehungen von Drittanbietern. Keine der hier angegebenen Lösungen ist ausreichend, um solche häufigen Szenarien anzugehen. Die meisten Webbrowser sind viel zu aggressiv im Caching und bieten keine sinnvollen Mittel, um diese Probleme zu vermeiden.

<meta http-equiv="pragma" content="no-cache" />

Siehe auch /programming/126772/how-to-force-a-web-browser-not-to-cache-images

Das Aktualisieren der URL auf Folgendes funktioniert für mich:

/custom.js?id=1

Durch Hinzufügen einer eindeutigen Nummer nach ?id=und Erhöhen dieser Nummer für neue Änderungen müssen Benutzer nicht drücken CTRL + F5, um den Cache zu aktualisieren. Alternativ können Sie eine Hash- oder String-Version der aktuellen Zeit oder der darauf folgenden Epoche anhängen?id=

Etwas wie ?id=1520606295

Hier ist die MDSN-Seite zum Festlegen des Caching in 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

Ich bin mir nicht sicher, ob Ihnen das wirklich helfen könnte, aber so sollte das Caching in jedem Browser funktionieren. Wenn der Browser eine Datei anfordert, sollte er immer eine Anforderung an den Server senden, es sei denn, es gibt einen "Offline" -Modus. Der Server liest einige Parameter wie Änderungsdatum oder Etags.

Der Server gibt eine 304-Fehlerantwort für NOT MODIFIED zurück und der Browser muss seinen Cache verwenden. Wenn das Etag auf der Serverseite nicht validiert wird oder das Änderungsdatum unter dem aktuellen Änderungsdatum liegt, sollte der Server den neuen Inhalt mit dem neuen Änderungsdatum oder den neuen Änderungsdaten oder beiden zurückgeben.

Wenn keine Caching-Daten an den Browser gesendet werden, ist das Verhalten vermutlich unbestimmt. Der Browser kann Dateien zwischenspeichern oder nicht, die nicht angeben, wie sie zwischengespeichert werden. Wenn Sie in der Antwort Caching-Parameter festlegen, werden Ihre Dateien korrekt zwischengespeichert, und der Server kann dann einen 304-Fehler oder den neuen Inhalt zurückgeben.

So sollte es gemacht werden. Die Verwendung von zufälligen Parametern oder Versionsnummern in URLs ist mehr wie ein Hack als alles andere.

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 /

Nach dem Lesen habe ich gesehen, dass es auch ein Ablaufdatum gibt. Wenn Sie ein Problem haben, ist möglicherweise ein Ablaufdatum eingerichtet. Mit anderen Worten, wenn der Browser Ihre Datei zwischenspeichert, da sie ein Ablaufdatum hat, sollte er sie nicht vor diesem Datum erneut anfordern müssen. Mit anderen Worten, es wird niemals die Datei an den Server senden und niemals eine 304 erhalten, die nicht geändert wurde. Der Cache wird einfach verwendet, bis das Ablaufdatum erreicht oder der Cache geleert ist.

Das ist also meine Vermutung, Sie haben eine Art Ablaufdatum und Sie sollten zuletzt geänderte Etags oder eine Mischung aus allem verwenden und sicherstellen, dass es kein Ablaufdatum gibt.

Wenn die Benutzer häufig aktualisieren und die Datei nicht häufig geändert wird, ist es möglicherweise ratsam, ein großes Ablaufdatum festzulegen.

Meine 2 Cent!

Ich habe diese einfache Lösung implementiert, die für mich funktioniert (noch nicht in der Produktionsumgebung):

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);
        }
    });
}

Ich habe eine kleine Datei, in der sich die HTML-Dateien befinden:

"versio.txt":

v00.5.0014

Diese Funktion wird auf allen meinen Seiten aufgerufen. Wenn Sie sie laden, wird überprüft, ob der Versionswert von localStorage niedriger als die aktuelle Version ist, und a

location.reload(true);

... um das Neuladen vom Server statt vom Cache zu erzwingen.

(Natürlich können Sie anstelle von localStorage Cookies oder anderen dauerhaften Client-Speicher verwenden.)

Ich habe mich wegen der Einfachheit für diese Lösung entschieden, da nur das Verwalten einer einzelnen Datei "versio.txt" das Neuladen der gesamten Site erzwingt.

Die queryString-Methode ist schwer zu implementieren und wird auch zwischengespeichert (wenn Sie von Version 1.1 zu einer früheren Version wechseln, wird sie aus dem Cache geladen, bedeutet dies, dass der Cache nicht geleert wird und alle vorherigen Versionen im Cache bleiben).

Ich bin ein kleiner Neuling und würde Ihre professionelle Überprüfung und Überprüfung schätzen, um sicherzustellen, dass meine Methode ein guter Ansatz ist.

Ich hoffe es hilft.

Zusätzlich zum Festlegen der Cache-Steuerung: kein Cache sollten Sie den Expires-Header auf -1 setzen, wenn die lokale Kopie jedes Mal aktualisiert werden soll (einige Versionen des IE scheinen dies zu erfordern).

Siehe HTTP-Cache - Fragen Sie beim Server nach und senden Sie immer If-Modified-Since

Es gibt einen Trick, der verwendet werden kann. Der Trick besteht darin, einen Parameter / eine Zeichenfolge an den Dateinamen im Skript-Tag anzuhängen und ihn zu ändern, wenn Sie Änderungen an der Datei vornehmen.

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

Der Browser interpretiert die gesamte Zeichenfolge als Dateipfad, obwohl was nach dem "?" sind Parameter. Jetzt passiert also, dass Sie beim nächsten Aktualisieren Ihrer Datei einfach die Nummer im Skript-Tag auf Ihrer Website ändern (Beispiel <script src="myfile.js?version=1.0.1"></script>) und jeder Benutzerbrowser sieht, dass sich die Datei geändert hat, und holt sich eine neue Kopie.

Browser zwingen, den Cache zu leeren oder korrekte Daten neu zu laden? Ich habe die meisten der im Stackoverflow beschriebenen Lösungen ausprobiert, einige funktionieren, aber nach einer Weile wird der Cache irgendwann zwischengespeichert und das zuvor geladene Skript oder die zuvor geladene Datei angezeigt. Gibt es eine andere Möglichkeit, den Cache zu leeren (CSS, JS usw.) und tatsächlich in allen Browsern zu funktionieren?

Bisher habe ich festgestellt, dass bestimmte Ressourcen einzeln neu geladen werden können, wenn Sie Datum und Uhrzeit Ihrer Dateien auf dem Server ändern. "Cache leeren" ist nicht so einfach wie es sein sollte. Anstatt den Cache in meinen Browsern zu leeren, wurde mir klar, dass durch "Berühren" der zwischengespeicherten Serverdateien Datum und Uhrzeit der auf dem Server zwischengespeicherten Quelldatei (auf Edge, Chrome und Firefox getestet) geändert werden und die meisten Browser automatisch die meisten herunterladen Aktuelle neue Kopie von dem, was sich auf Ihrem Server befindet (Code, Grafiken und Multimedia-Inhalte). Ich schlage vor, Sie kopieren einfach die aktuellsten Skripte auf den Server und "do the touch thing" -Lösung, bevor Ihr Programm ausgeführt wird. Dadurch wird das Datum aller Ihrer Problemdateien auf das aktuellste Datum und die aktuellste Uhrzeit geändert und anschließend eine neue Kopie heruntergeladen zu Ihrem Browser:

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

dann ... der Rest Ihres Programms ...

Ich habe einige Zeit gebraucht, um dieses Problem zu beheben (da viele Browser unterschiedlich auf verschiedene Befehle reagieren, aber alle die Uhrzeit der Dateien überprüfen und mit Ihrer heruntergeladenen Kopie in Ihrem Browser vergleichen, wenn Datum und Uhrzeit unterschiedlich sind, wird die Aktualisierung durchgeführt) kann nicht den vermeintlich richtigen Weg gehen, es gibt immer eine andere brauchbare und bessere Lösung dafür. Beste Grüße und viel Spaß beim Zelten. Übrigens touch (); oder Alternativen funktionieren in vielen Programmiersprachen, einschließlich in Javascript bash sh php, und Sie können sie in HTML einschließen oder aufrufen.

Möchten Sie den Cache leeren oder nur sicherstellen, dass Ihre aktuelle (geänderte?) Seite nicht zwischengespeichert ist?

Wenn letzteres der Fall ist, sollte es so einfach sein wie

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