Browser zwingen, CSS, Javascript usw. Zu aktualisieren

Ich entwickle eine Website, die auf Wordpress-Quellcode über XAMPP basiert. Manchmal ändere ich den CSS-Code, Skripte oder etwas anderes und stelle fest, dass mein Browser Zeit braucht, um die Änderungen zu übernehmen. Dies führt dazu, dass ich mehrere Browser verwende, um einen zu aktualisieren. Wenn die neuen Stile nicht angewendet werden, versuche ich den zweiten und es ist immer so.

Gibt es eine Möglichkeit, dieses Problem zu vermeiden? Manchmal ändere ich den Code, ohne die vorherigen Änderungen zu bemerken.

Allgemeine Lösung

Drücken Sie Ctrl+ F5(oder Ctrl+ Shift+ R), um ein erneutes Laden des Caches zu erzwingen. Ich glaube , dass Macs verwenden Cmd+ Shift+ R.

PHP

In PHP können Sie den Cache deaktivieren, indem Sie das Ablaufdatum mit Headern auf eine frühere Zeit setzen:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrom

Der Cache von Chrome kann deaktiviert werden, indem Sie die Entwicklertools mit öffnen F12, auf das Zahnradsymbol in der unteren rechten Ecke klicken und im Einstellungsdialog die Option Cache deaktivieren wie folgt auswählen:

^{Bild aus dieser Antwort genommen .}

Feuerfuchs

Geben Sie about:configin die URL-Leiste ein und suchen Sie den Eintrag mit dem Titel network.http.use-cache. Stellen Sie dies auf ein false.

Wenn Sie dies auf der Clientseite vermeiden möchten, können Sie ?v=1.xdem CSS-Dateilink etwas hinzufügen , wenn der Dateiinhalt geändert wird. Wenn dies beispielsweise der Fall ist <link rel="stylesheet" type="text/css" href="css-file-name.css">, können Sie dies ändern, um <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">das Caching zu umgehen.

Wenn Sie PHP schreiben können, können Sie schreiben:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

Es wird immer aktualisiert!

EDIT: Natürlich ist es nicht wirklich praktisch für eine ganze Website, da Sie dies nicht für alles manuell hinzufügen würden.

Überprüfen Sie Folgendes: Wie zwinge ich den Browser, die neueste Version meines Stylesheets zu verwenden?

Angenommen, Ihre CSS-Datei ist foo.css, können Sie den Client zwingen, die neueste Version zu verwenden, indem Sie eine Abfragezeichenfolge wie unten gezeigt anhängen.

<link rel="stylesheet" href="foo.css?v=1.1">

Entwicklersicht
Wenn Sie sich im Entwicklungsmodus befinden (wie in der ursprünglichen Frage), besteht der beste Ansatz darin, das Caching im Browser über HTML-Meta-Tags zu deaktivieren. Um diesen Ansatz universell zu gestalten, müssen Sie mindestens drei Meta-Tags einfügen, wie unten gezeigt.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Auf diese Weise müssen Sie als Entwickler nur die Seite aktualisieren, um die Änderungen zu sehen. Vergessen Sie jedoch nicht, diesen Code in der Produktion zu kommentieren, schließlich ist Caching eine gute Sache für Ihre Kunden.

Produktionsmodus
Da Sie in der Produktion das Caching zulassen und Ihre Kunden nicht wissen müssen, wie ein vollständiges Neuladen oder ein anderer Trick erzwungen werden muss, müssen Sie sicherstellen, dass der Browser die neue Datei lädt. Und ja, in diesem Fall ist der beste Ansatz, den ich kenne, den Namen der Datei zu ändern.

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Es wird aktualisiert, wenn Änderungen vorgenommen werden.

Stellen Sie sicher, dass dies nicht über Ihr DNS geschieht. In Cloudflare können Sie beispielsweise den Entwicklungsmodus aktivieren, in dem Ihre Stylesheets und Bilder gelöscht werden, da Cloudflare einen beschleunigten Cache bietet. Dadurch wird es deaktiviert und bei jedem Besuch Ihrer Website aktualisiert.

Löschen Sie den Cache Ihres Browsers.

Sie können das Caching mit der Webentwickler-Symbolleiste von Firefox deaktivieren.

Diese Firefox-Erweiterung war die einzige Lösung, die ich zur Arbeit bringen konnte: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

Die oben akzeptierte Antwort ist korrekt. Wenn Sie den Cache jedoch nur regelmäßig neu laden möchten und Firefox verwenden, bieten die Web Developer-Tools (unter dem Menüpunkt Tools ab November 2015) eine Netzwerkoption. Dies beinhaltet eine Schaltfläche zum erneuten Laden. Wählen Sie das Neuladen für einen einmaligen Cache-Reset.

Wenn Sie sicherstellen möchten, dass diese Dateien von Chrome für alle Benutzer ordnungsgemäß aktualisiert werden, müssen Sie sie must-revalidatein der Cache-ControlKopfzeile haben. Dadurch überprüft Chrome die Dateien erneut, um festzustellen, ob sie erneut abgerufen werden müssen.

Empfehlen Sie den folgenden Antwortheader:

Cache-Control: must-validate

Dadurch wird Chrome angewiesen, beim Server zu prüfen, ob eine neuere Datei vorhanden ist. Wenn es eine neuere Datei gibt, erhält sie diese in der Antwort. Wenn nicht, erhält es eine Antwort 304 und die Zusicherung, dass die Antwort im Cache auf dem neuesten Stand ist.

Wenn Sie diesen Header NICHT festlegen, wird Chrome ohne eine andere Einstellung, die die Datei ungültig macht, niemals beim Server nachfragen, ob es eine neuere Version gibt.

Hier ist ein Blog-Beitrag , in dem das Problem weiter behandelt wird.

Verwenden Sie anstelle des Link-Tags in HTML-Kopf zur externen CSS-Datei PHP-Include:

<style>
<?php
include("style.css");
?>      
</style>

Art von Hack, funktioniert aber bei mir :)

Ich habe beschlossen, dass ich meine CSS- und JS-Verzeichnisse bei jeder Änderung umbenenne, da Browser nicht nach neuen Versionen von CSS- und JS-Dateien suchen. Ich benutze css1 bis css9 und js1 bis js9 als Verzeichnisnamen. Wenn ich 9 bin, fange ich als nächstes bei 1 an. Es ist ein Schmerz, aber es funktioniert jedes Mal perfekt. Es ist lächerlich, den Benutzern sagen zu müssen, dass sie tippen sollen.

Ich habe einen Fall, in dem ich in der Lage sein muss, meine Stylesheets aus der Ferne zu erstellen und zu ändern, was Tausende von Clients betrifft. Aufgrund des Risikos einer hohen Netzwerklast schalte ich den Cache jedoch nicht aus.

Da ich den HTML-Inhalt remote ändern kann, verknüpfe ich das Stylesheet mit einem Hashcode, der dem Inhalt des Stylesheets entspricht.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Allerdings verwende ich auch eine clientseitige Javascript-Funktion, um Knoten und Attribute sorgfältig zu ersetzen, wenn sich der HTML-Inhalt ändert. Dies bedeutet, dass das Stylesheet-Link-Tag nicht ersetzt wird, sondern nur das href-Attribut.

Dieses Szenario funktioniert gut in Chrome, Firefox und Edge unter Windows, auch in Chrome unter Android, funktioniert aber zu meiner Überraschung nicht immer in Webclients unter Android. Ich bin also mehr oder weniger auf der Suche nach etwas, um das Update mithilfe von Javascript zu erzwingen / auszulösen - optimal, ohne dass die Seite neu geladen werden muss.

Versuche dies:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Wenn Sie etwas nach dem '?' Das ist jedes Mal anders, wenn auf die Seite zugegriffen time()wird. Es ist keine gute Idee, dies dauerhaft in Ihrem Code zu belassen, da dies das Laden von Seiten nur verlangsamt und wahrscheinlich nicht erforderlich ist.

Ich habe festgestellt, dass das Erzwingen einer Stylesheet-Aktualisierung hilfreich ist, wenn Sie umfangreiche Änderungen am Layout einer Seite vorgenommen haben und der Zugriff auf das neue Stylesheet von entscheidender Bedeutung ist, damit etwas Sinnvolles auf dem Bildschirm angezeigt wird.