{"id":4569,"date":"2016-09-24T09:58:12","date_gmt":"2016-09-24T08:58:12","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=4569"},"modified":"2016-09-03T09:58:52","modified_gmt":"2016-09-03T08:58:52","slug":"cache-busting-in-asp-net-core-verhindern-dass-browser-alte-jscss-dateien-oder-bilder-zwischenspeichern","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/cache-busting-in-asp-net-core-verhindern-dass-browser-alte-jscss-dateien-oder-bilder-zwischenspeichern\/","title":{"rendered":"Cache busting in ASP.NET Core: Verhindern, dass Browser alte JS\/CSS Dateien oder Bilder zwischenspeichern"},"content":{"rendered":"

Bereits seit l\u00e4ngerem ist es bei vielen Browsern \u00fcblich, statische Inhalte wie JavaScript\/CSS und Bilder lokal zwischenzuspeichern. In der Regel geschieht dies anhand des Namens: Der Browser l\u00e4dt beispielsweise die Datei\u00a0style.css<\/em> beim ersten Besuch herunter und speichert sie lokal auf dem Computer. Beim n\u00e4chsten Aufrufen der Seite pr\u00fcft der Browser zuerst seinen Cache, findet die\u00a0style.css<\/em> und ruft sie gar nicht erst vom Server ab – denn sie liegt ja bereits lokal vor. Grunds\u00e4tzlich ist das sinnvoll: Ladezeit und Serverlast werden reduziert, au\u00dferdem sparen mobile Nutzer einiges an Datenvolumen.<\/p>\n

Was passiert bei \u00c4nderungen?\u00a0<\/strong><\/h4>\n

Nun hat der Nutzer unsere\u00a0style.css<\/em>\u00a0beispielsweise am 01.09.2016 in seinen lokalen Cache geladen. Einen Tag sp\u00e4ter (02.09.2016) aktualisieren wir unsere Seite, wodurch einige Zeilen CSS-Code in der Datei ge\u00e4ndert und hinzugef\u00fcgt werden. Besucht unser Nutzer nun die Seite erneut, erkennt der Browser die \u00c4nderung m\u00f6glicherweise nicht und l\u00e4dt die alte Datei aus dem Cache. Die Folge: Das neue Design wird nicht angezeigt. M\u00f6glicherweise sieht die Seite sogar kaputt aus, weil alte CSS Klassen\/Ids durch neue ersetzt wurden.<\/p>\n

Es gibt diverse M\u00f6glichkeiten, dagegen vorzugehen. Beispielsweise kann der Server im HTTP-Header das \u00c4nderungsdatum der Datei senden. Liegt dies vor dem Datum der Datei im Cache, wird sie neu geladen. Als einfache und zuverl\u00e4ssige Methode hat sich jedoch das Verwenden eines URL-Parameters bew\u00e4hrt. Die Browser ber\u00fccksichtigen diese mit, da CSS- und JavaScript Dateien auch dynamisch generiert werden k\u00f6nnen. In der Regel generiert man den Hashwert der Datei und \u00fcbergibt diesen als v-Parameter f\u00fcr Version, wobei die Bezeichnung keine Rolle spielt:<\/p>\n

\r\n<link rel="stylesheet" href="\/css\/style.css?v=1wp5zz4e-mOPFx4X2O8seW_DmUtePn5xFJk1vB7JKRc" \/>\r\n<\/pre>\n
Idealerweise generiert man den Hash beim deployment. So wird sichergestellt, dass er immer dem Stand der jeweiligen Datei entspricht.<\/p>\n
Wie wird cache busting in ASP.NET Core verwendet?<\/strong><\/h4>\n
Da dieses Problem jeden Webentwickler betrifft, hat das Framework eine smarte L\u00f6sung an Board: Das Hilfsattribut asp-append-version<\/em> \u00fcbernimmt die gesamte Arbeit, sofern es auf true gesetzt wurde.<\/p>\n
Ein Beispiel:<\/p>\n
\r\n<link rel="stylesheet" href="~\/css\/site.css" asp-append-version="true" \/>\r\n<\/pre>\n
ASP.NET Core wird den Hash der Datei beim Start generieren und ihn als v-Parameter an den Dateiname anf\u00fcgen, wie im obigen Beispiel zu sehen. Dieses Attribute kann bei CSS-Stylesheets, JavaScript-Dateien und sogar Bildern verwendet werden:<\/p>\n
\r\n<img src="~\/images\/image.jpg" asp-append-version="true" \/>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Bereits seit l\u00e4ngerem ist es bei vielen Browsern \u00fcblich, statische Inhalte wie JavaScript\/CSS und Bilder lokal zwischenzuspeichern. In der Regel geschieht dies anhand des Namens: Der Browser l\u00e4dt beispielsweise die Datei\u00a0style.css beim ersten Besuch herunter und speichert sie lokal auf dem Computer. Beim n\u00e4chsten Aufrufen der Seite pr\u00fcft der Browser zuerst seinen Cache, findet die\u00a0style.css …<\/p>\n","protected":false},"author":5,"featured_media":4581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61],"tags":[522,537],"class_list":["post-4569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwareentwicklung","tag-asp-net-core","tag-asp-net-core-1-0"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/4569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=4569"}],"version-history":[{"count":14,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/4569\/revisions"}],"predecessor-version":[{"id":4587,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/4569\/revisions\/4587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/4581"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=4569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=4569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=4569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}