it-swarm.com.de

Browser erzwingen, CSS, Javascript usw. zu aktualisieren

Ich entwickle eine Website, die auf Wordpress-Quellcode durch XAMPP basiert. Manchmal ändere ich den CSS-Code, scrips oder etwas anderes, und ich bemerke, dass mein Browser Zeit für die Änderungen benötigt. Dies führt mich dazu, mehrere Browser zu verwenden, um einen zu aktualisieren, und wenn die neuen Stile nicht angewendet werden, probiere ich den zweiten aus, und es ist immer so.

Es gibt eine Möglichkeit, dieses Problem zu vermeiden. Manchmal ändere ich den Code ohne vorherige Ankündigung.

67
user1511579

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 auf eine Zeit in der Vergangenheit mit Überschriften 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 durch Öffnen der Entwicklertools mit deaktiviert werden F12Klicken Sie auf das Zahnradsymbol in der unteren rechten Ecke und wählen Sie im Einstellungsdialog die Option Cache deaktivieren.

enter image description here
Bild aus diese Antwort .

Feuerfuchs

Geben Sie about:config in die URL-Leiste ein und suchen Sie den Eintrag network.http.use-cache. Setzen Sie dies auf false.

88
Bojangles

Wenn Sie dies auf der Clientseite vermeiden möchten, können Sie der CSS-Datei einen Link wie ?v=1.x hinzufügen, wenn der Dateiinhalt geändert wird. Wenn beispielsweise <link rel="stylesheet" type="text/css" href="css-file-name.css"> vorhanden ist, können Sie es in <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1"> ändern, um die Zwischenspeicherung zu umgehen.

43
F0G

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 erfrischen!

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

9
Mageek

Überprüfen Sie Folgendes: Wie erzwinge ich, dass der Browser die neueste Version meines Stylesheets verwendet?

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

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

Standpunkt des Entwicklers
Wenn Sie sich im Entwicklungsmodus befinden (wie in der ursprünglichen Frage), ist es am besten, das Zwischenspeichern im Browser über HTML-Meta-Tags zu deaktivieren. Um diesen Ansatz universell zu gestalten, müssen Sie mindestens drei Metatags einfügen (siehe unten).

<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 das Zwischenspeichern eine gute Sache für Ihre Kunden.

Produktionsmodus
Da Sie in der Produktion Zwischenspeicherungen zulassen und Ihre Kunden nicht wissen müssen, wie sie ein vollständiges Neuladen oder einen anderen Trick erzwingen, müssen Sie garantieren, dass der Browser die neue Datei lädt. Der beste Ansatz, den ich kenne, ist, den Namen der Datei zu ändern.

2
ePi272314

Ich habe beschlossen, da Browser nicht nach neuen Versionen von css- und js-Dateien suchen, benenne ich meine css- und js-Verzeichnisse um, wenn ich eine Änderung vornehme. Ich benutze css1 bis css9 und js1 bis js9 als Verzeichnisnamen. Wenn ich zu 9 komme, fange ich als nächstes wieder bei 1 an. Es ist ein Schmerz, aber es funktioniert jedes Mal perfekt. Es ist lächerlich, den Benutzern das Tippen mitzuteilen. 

0
Roger Jones

Stellen Sie sicher, dass dies nicht in Ihrem DNS geschieht. In Cloudflare können Sie beispielsweise den Entwicklungsmodus aktivieren, in dem Sie Ihre Stylesheets und Bilder bereinigen müssen, da Cloudflare einen beschleunigten Cache bietet. Dadurch wird es deaktiviert und erzwingt jedes Mal, wenn jemand Ihre Site besucht.

0
Sean

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

0
Keyslinger

Verwenden Sie php-include anstelle des Link-Tags in html-head zu einer externen CSS-Datei:

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

Art von Hack, aber funktioniert für mich :)

0
Jens Rundberg

Die akzeptierte Antwort oben ist richtig. Wenn Sie den Cache jedoch nur periodisch neu laden möchten und Firefox verwenden, bieten die Web Developer-Tools (unter dem Menüelement Tools ab November 2015) die Option Network. Dies beinhaltet einen Reload-Button. Wählen Sie das Reload für einen einmaligen Cache-Reset aus.

0
Steve Cooke

Wenn Sie sicherstellen möchten, dass diese Dateien von Chrome für alle Benutzer ordnungsgemäß aktualisiert werden, muss must-revalidate im Header Cache-Control vorhanden sein. Dadurch werden die Dateien von Chrome erneut geprüft, um festzustellen, ob sie erneut abgerufen werden müssen. 

Empfehlen Sie den folgenden Antwortheader:

Cache-Control: must-validate

Dadurch wird Chrome angewiesen, den Server zu überprüfen und festzustellen, ob eine neuere Datei vorhanden ist. Wenn eine neuere Datei vorhanden ist, erhält sie diese in der Antwort. Wenn nicht, erhält es eine Antwort 304 und die Sicherheit, dass die im Cache befindliche Antwort aktuell ist.

Wenn Sie diesen Header NICHT festlegen, wird Chrome never beim Server überprüfen, ob eine neuere Version vorhanden ist.

Hier ist ein Blogbeitrag , der das Thema weiter bespricht.

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

Es wird aktualisiert, wenn Sie ändern.

0
AllenBooTung

Löschen Sie den Cache Ihres Browsers.

0
DominicEU

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

0
Florent