Chrome: Hyphens und Cache Problematik

[Christian Kruse]

Hallo 1unitedpower,

Ja, Zeitstempel an Links zu hängen ist schmutziger Tricke, der schon ewig lange kursiert, den aber eigentlich niemand mehr braucht. HTTP sieht diverse Kopfdaten vor, um Browsercaching zu steuern. Einfach mal nach Cache-Control oder ETag suchen.

Das ist nur halb richtig. Man nutzt fingerprinting vor allem für Bilder, CSS und JS immer noch gerne, weil es einem erlaubt ein Expires-Datum weit in der Zukunft zu setzen. Das sorgt dafür, dass gar nicht erst ein Request für die Ressourcen abgesetzt wird, sondern direkt die Ressource aus dem Cache genommen wird. Um trotzdem Änderungen machen zu können, wird ein Fingerprint an die Datei angehängt; das kann der Timestamp der letzten Änderung sein, das kann auch ein Hash über den Inhalt der Datei sein. Beispiel hier aus dem Forum:

➜ ckruse@sunshine ~  % curl -I https://forum.selfhtml.org/assets/application-fe30121adc9984f9b5682755ee9b5aefdc4d2eedd2e1565a513d56306d3e71dc.css
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Tue, 03 Apr 2018 04:58:07 GMT
Content-Type: text/css
Content-Length: 137297
Last-Modified: Wed, 24 Jan 2018 07:52:01 GMT
Connection: keep-alive
Vary: Accept-Encoding
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Cache-Control: public
Accept-Ranges: bytes

➜ ckruse@sunshine ~  %

Wenn ich jetzt eine Änderung am CSS mache, wird die CSS-Datei im Deployment umbenannt und erhält einen neuen Hash-Teil. Die alte Datei bleibt erstmal liegen. Der Browser ruft die application.css gar nicht erst ab, sondern nimmt die aus dem Cache. Erst wenn ich tatsächlich etwas ändere, muss der Browser die neue Datei abrufen.

LG,
CK