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
+27
View File
@@ -2347,3 +2347,30 @@ async function closeSlot(slot, label, pnl) {
if (a) a.onclick = () => closeSlot("main", "Slot 1", letzterSnap && letzterSnap.position ? letzterSnap.position.pnl : null); if (a) a.onclick = () => closeSlot("main", "Slot 1", letzterSnap && letzterSnap.position ? letzterSnap.position.pnl : null);
if (b) b.onclick = () => closeSlot("brk", "BRK", letzterSnap && letzterSnap.position_brk ? letzterSnap.position_brk.pnl : null); if (b) b.onclick = () => closeSlot("brk", "BRK", letzterSnap && letzterSnap.position_brk ? letzterSnap.position_brk.pnl : null);
} }
// --- Cache-Wächter: passt die HTML zum JS? ---------------------------------
// ⚠⚠ WOZU. `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 zwar den Absturz, aber die Anzeige ist
// still unvollstaendig. Real passiert am 19.08. (M5-/RSI-Zeile) und am 20.08.
// (Close-Knoepfe an den G/V-Anzeigen) — beide Male sah der Server korrekt aus
// und der Browser zeigte Altes. Statt das jedes Mal von Hand zu diagnostizieren,
// sagt die Seite es jetzt selbst.
// ⚠ Bewusst SICHTBAR statt nur Konsole: die Konsole sieht am Handy niemand.
const _JS_V = "199";
{
const htmlV = document.body && document.body.dataset
? document.body.dataset.htmlV : null;
if (htmlV && htmlV !== _JS_V) {
const b = document.createElement("div");
b.style.cssText = "position:fixed;left:0;right:0;bottom:0;z-index:9999;"
+ "background:#8b1a1a;color:#fff;padding:.6rem;text-align:center;"
+ "font:600 .9rem system-ui,sans-serif;cursor:pointer";
b.textContent = `⚠ Alte Seite im Cache (HTML v${htmlV}, JS v${_JS_V}) `
+ `— hier tippen zum Neuladen`;
b.onclick = () => location.replace(
location.pathname + "?x" + Date.now());
document.body.appendChild(b);
}
}
+1 -1
View File
@@ -14,7 +14,7 @@
<link rel="stylesheet" href="pico.min.css?v=1"> <link rel="stylesheet" href="pico.min.css?v=1">
<link rel="stylesheet" href="style.css?v=199"> <link rel="stylesheet" href="style.css?v=199">
</head> </head>
<body> <body data-html-v="199">
<!-- Modul-Menü (ganz oben) --> <!-- Modul-Menü (ganz oben) -->
<nav id="tabs"> <nav id="tabs">
<button class="tab active" data-view="dash">Dashboard</button> <button class="tab active" data-view="dash">Dashboard</button>