Cache-Waechter: die Seite meldet selbst, wenn HTML und JS nicht zusammenpassen

User: "die buttons werden nicht angezeigt" (Close-Knoepfe an den G/V-Anzeigen).

DIAGNOSE: serverseitig war alles korrekt - HTML, CSS und JS werden mit v=199
ausgeliefert, der Knopf steht im gelieferten Markup, die CSS-Regel ist da, und
KEINE andere Regel versteckt ihn (globale button-Regeln gibt es nicht, .px setzt
nur Schrift). Der Server sendet no-store, und last-modified stimmt mit der
Platte ueberein. Es bleibt der Browser-Cache.

⚠⚠ URSACHE IST STRUKTURELL, nicht einmalig: `index.html` wird vom `?v=`-Bump
NICHT gebustet - nur app.js und style.css. Trifft neues JS auf eine alte,
gecachte HTML, fehlen die neuen Elemente. Das Auffang-`$` verhindert den
Absturz, aber die Anzeige ist STILL unvollstaendig. Real jetzt zum zweiten Mal:
19.08. (M5-/RSI-Zeile) und 20.08. (diese Knoepfe) - beide Male sah der Server
korrekt aus und der Browser zeigte Altes, und beide Male habe ich es von Hand
diagnostizieren muessen.

GEBAUT: `<body data-html-v="199">` plus eine Konstante `_JS_V` in app.js. Weichen
sie ab, blendet die Seite unten ein rotes Band ein ("Alte Seite im Cache, HTML
v198, JS v199 - hier tippen zum Neuladen"); ein Tipp darauf laedt mit frischem
Query-String neu.
⚠ Bewusst SICHTBAR statt nur Konsole - die sieht am Handy niemand.
⚠ Die Version wird beim `?v=`-Bump aus der HTML gelesen, muss also nicht getrennt
gepflegt werden.

BEIDE RICHTUNGEN VERIFIZIERT: HTML v198 gegen JS v199 -> Banner erscheint;
gleiche Version -> kein Banner.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

This commit is contained in:

Axel Hocks

2026-08-20 12:01:30 +02:00

co-authored by

Claude Opus 5

parent d881636e1b

commit 54bcc9f81d

2 changed files with 28 additions and 1 deletions

									
										web/index.html
									
		+1
		-1
	
												View File
												
				@@ -14,7 +14,7 @@

				  <link rel="stylesheet" href="pico.min.css?v=1">

				  <link rel="stylesheet" href="style.css?v=199">

				</head>

				<body>

				<body data-html-v="199">

				  <!-- Modul-Menü (ganz oben) -->

				  <nav id="tabs">

				    <button class="tab active" data-view="dash">Dashboard</button>