Service Worker lieferte alte Stilvorlagen aus - Korrekturen blieben unsichtbar

Gemeldet 22.08.2026 mit Bildschirmfoto: "immer noch so" -- das Logo im
Marken-Intro stand weiterhin hochkant gestreckt da, obwohl die Korrektur
(height:auto gegen die height-Attribute) laengst live war.

Ursache war NICHT die Korrektur, sondern mein eigener Service Worker. Er
lief fuer /assets/ als "stale-while-revalidate": die gespeicherte Fassung
geht sofort raus, im Hintergrund wird eine frische geholt. Das ist schnell
-- bedeutet aber, dass jede Aenderung an CSS oder JavaScript beim ersten
Aufruf unsichtbar bleibt und erst beim zweiten wirkt. Ein behobener Fehler
sieht dadurch aus wie ein nicht behobener. Die unangenehmste Sorte.

Nachgemessen ist das Logo jetzt 160x161px bei einem natuerlichen
Verhaeltnis von 472x476 -- also unverzerrt. Vorher erzwang das Attribut
height="476" bei 160px Breite ein Verhaeltnis von 0,34 statt 0,99, genau
das lange Gesicht auf dem Bildschirmfoto.

Behoben:
- Stilvorlagen und Skripte laufen jetzt "Netz zuerst", Zwischenspeicher
  nur als Notfallnetz. Richtigkeit vor Millisekunden.
- Bilder und Symbole bleiben beim schnellen Weg -- die aendern sich
  praktisch nie und bekaemen sonst einen neuen Dateinamen.
- CACHE_NAME auf v2 gesetzt, damit der alte Speicher beim naechsten Start
  vollstaendig weggeworfen wird.
- Versionsnummer an allen CSS/JS-Verweisen hochgesetzt, damit es sich auch
  ohne Service Worker sofort selbst heilt.

Ausserdem: Woerterbuch fuer das Anfrageformular, 101 Textbausteine in fuenf
Sprachen (vier Schritte, Zusammenfassung, Fehlermeldungen).

Co-Authored-By: Claude Opus 5 <[email protected]>

webdesign/ablauf.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   /* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
      den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
@@ -183,7 +183,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ablauf.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-ablauf.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/faq.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   .fq-thema { scroll-margin-top: 90px; }
   .fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
@@ -160,7 +160,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-faq.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-faq.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/index.html

@@ -16,8 +16,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   /* ---------- Nur auf der Startseite gebraucht ---------- */
 
@@ -407,8 +407,8 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-index.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-index.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 <script>
 /* ---------------------------------------------------------------------
    Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code

webdesign/leistungen.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   /* Sprungmarken-Leiste: auf schmalen Bildschirmen waagerecht wischbar
      statt umbrechend — vier lange deutsche Paketnamen ergeben sonst vier
@@ -301,7 +301,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/portfolio.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
   .pfo-bild {
@@ -192,7 +192,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-portfolio.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-portfolio.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/preise.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   .pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
 
@@ -196,7 +196,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-preise.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-preise.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/sw.js

@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v1";
+const CACHE_NAME = "dogfather-webdesign-v2";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */
@@ -126,11 +126,45 @@ self.addEventListener("fetch", (ereignis) => {
   /* --- Zugangs-Endpunkte niemals zwischenspeichern --- */
   if (url.pathname.startsWith("/webdesign/zugang-")) return;
 
-  /* --- Neutrale Bausteine: erst Zwischenspeicher, dann Netz ---
-     "stale-while-revalidate": die gespeicherte Fassung geht sofort raus
-     (die Seite baut sich ohne Wartezeit auf), im Hintergrund wird eine
-     frische geholt und für das nächste Mal abgelegt. */
+  /* --- Neutrale Bausteine unter /assets/ ---
+
+     ⚠️ HIER WAR EIN ECHTER FEHLER (gemeldet 22.08.2026: "immer noch so").
+
+     Vorher lief das als "stale-while-revalidate": die gespeicherte Fassung
+     ging sofort raus, im Hintergrund wurde eine frische geholt. Das ist
+     schnell — bedeutet aber, dass jede Korrektur an CSS oder JavaScript
+     beim ersten Aufruf UNSICHTBAR bleibt und erst beim zweiten wirkt.
+     Genau das ist passiert: die Korrektur am gestreckten Logo war auf dem
+     Server längst live, der Browser hat aber die alte Stilvorlage aus
+     meinem eigenen Zwischenspeicher angezeigt. Ein Fehler, der wie ein
+     nicht behobener Fehler aussieht — die unangenehmste Sorte.
+
+     Jetzt: erst Netz, Zwischenspeicher nur als Notfallnetz.
+     Für Stilvorlagen und Skripte ist Richtigkeit wichtiger als die
+     eingesparten Millisekunden — eine falsche Darstellung kostet mehr
+     als ein kurzer Ladevorgang. Bilder und Symbole bleiben beim schnellen
+     Weg: die ändern sich praktisch nie, und wenn doch, bekommen sie einen
+     neuen Dateinamen. */
   if (url.pathname.startsWith("/assets/")) {
+    const istCodeOderStil = /\.(css|js|mjs)$/i.test(url.pathname);
+
+    if (istCodeOderStil) {
+      // Netz zuerst
+      ereignis.respondWith(
+        fetch(anfrage)
+          .then((antwort) => {
+            if (antwort && antwort.status === 200 && antwort.type === "basic") {
+              const kopie = antwort.clone();
+              caches.open(CACHE_NAME).then((speicher) => speicher.put(anfrage, kopie));
+            }
+            return antwort;
+          })
+          .catch(() => caches.match(anfrage).then((g) => g || Response.error()))
+      );
+      return;
+    }
+
+    // Bilder, Symbole, Schriften: Zwischenspeicher zuerst
     ereignis.respondWith(
       caches.open(CACHE_NAME).then(async (speicher) => {
         const gespeichert = await speicher.match(anfrage);
@@ -149,7 +183,9 @@ self.addEventListener("fetch", (ereignis) => {
         return gespeichert || (await ausDemNetz) || Response.error();
       })
     );
+    return;
   }
+
   /* Alles Übrige: kein respondWith -> der Browser macht es ganz normal
      selbst. Das ist die sicherste Voreinstellung. */
 });

webdesign/ueber.html

@@ -13,8 +13,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   .ue-kopf { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
   /* Auf dem Handy zuerst der Text, dann das Bild: sonst schiebt ein
@@ -127,7 +127,7 @@
 
 <div id="wd-fuss"></div>
 
-<script src="/assets/js/i18n-wd-ueber.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-ueber.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 </body>
 </html>

webdesign/zugang.html

@@ -21,8 +21,8 @@
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
   /* =====================================================================
      Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -177,8 +177,8 @@
   </div>
 </main>
 
-<script src="/assets/js/i18n-wd-zugang.js?v=20260822wd"></script>
-<script src="/assets/js/wd-core.js?v=20260822wd"></script>
+<script src="/assets/js/i18n-wd-zugang.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
 <script>
 (function () {
   "use strict";