Wie verhindere ich das Caching von JavaScript
Wem ist das noch nicht passiert? Man macht eine Änderung an der JavaScript-Datei, packt sie auf den Server, aber die Änderungen werden nicht wirksam. Daran ist in der Regel der Browsercache schuld. Wenn sich an der URL nichts geändert hat, verwendet der Browser beim Laden einer JavaScript Datei bevorzugt eine gecachte Kopie. Das hat den Vorteil, dass die Seite schneller geladen werden kann. Für den Entwickler ist es aber extrem nervig und schlimmer noch, es tritt auch in der ausgelieferten Anwendung auf.
Vor allem Chrome ist da sehr störrisch und auch der komplette Reload der Webseite (CTRL+F5, oder CMD+F5 auf dem Mac) löst das Problem in neueren Versionen nicht. Die beste Möglichkeit ist für die Entwicklungszeit den Cache komplett auszuschalten. Dazu öffnet man in Chrome die Developertools (Ctrl+Shift+J, oder Cmd+Alt+I auf dem Mac) und setzt ein Häkchen unter "Network -> Disable Cache".
Dieses Setting gilt nur, wenn die Developertools geöffnet sind und überlebt auch den Neustart des Browsers. Damit lässt sich dieses nervige Problem zur Entwicklungszeit dauerhaft beheben. Was aber, wenn das Problem in der Produktionsumgebung auftritt? Ein Bug auf der Webseite wird gemeldet, Der Entwickler behebt ihn schnell, testet (mit abgeschaltetem Cache) und lädt die neue Version auf den Server, aber die Nutzer beschweren sich weiterhin.
Eine Möglichkeit den Cache auszuhebeln ist es, das Script einfach umzubenennen. Der Browser muss die JavaScript-Datei neu laden, wenn sich die URL ändert. Alternativ kann man aber auch den Namen beibehalten und der URL einfach einen URL-Parameter anhängen. Nehmen wir an, das ist die Referenz:
<script src="MeinScript.js">
Macht man daraus einfach:
<script src="MeinScript.js?v=1">
Das erzwingt ganz einfach einen Reload der Datei in jedem Browser.