feat: PWA-Feinschliff mit Service Worker und Offline-Seite

Drei Strategien: Poster und statische Dateien zuerst aus dem Zwischenspeicher,
Seiten zuerst aus dem Netz, API-Aufrufe gar nicht.

Ein Tracker, der veraltete Stände zeigt, wäre schlimmer als einer, der ehrlich
sagt: gerade keine Verbindung. Schreibende Anfragen laufen nie über den
Service Worker.

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import { Outfit } from "next/font/google";
 import { BrandDefs } from "@/components/brand/FlimmerLogo";
 import { ToastProvider } from "@/components/Toasts";
+import { ServiceWorkerRegistration } from "@/components/ServiceWorkerRegistration";
 import { env } from "@/lib/env";
 import "./globals.css";
 
@@ -75,6 +76,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           Zum Inhalt springen
         </a>
         <ToastProvider>{children}</ToastProvider>
+        <ServiceWorkerRegistration />
       </body>
     </html>
   );

src/app/offline/page.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { FlimmerMark } from "@/components/brand/FlimmerLogo";
+
+export const metadata: Metadata = { title: "Keine Verbindung" };
+
+/**
+ * Rückfallseite des Service Workers.
+ *
+ * Bewusst ohne Datenzugriff: sie muss auch dann funktionieren, wenn der
+ * Server nicht erreichbar ist, und wird deshalb statisch vorgerendert.
+ */
+export default function OfflinePage() {
+  return (
+    <main
+      id="inhalt"
+      className="flex min-h-dvh flex-col items-center justify-center px-6 text-center"
+    >
+      <FlimmerMark className="h-16 w-16" />
+      <h1 className="mt-6 text-2xl font-semibold tracking-tight">Gerade keine Verbindung</h1>
+      <p className="mt-2 max-w-sm text-[var(--fl-muted)]">
+        Flimmer erreicht deinen Server nicht. Bereits geladene Seiten und Poster bleiben verfügbar —
+        alles Weitere kommt zurück, sobald die Verbindung wieder steht.
+      </p>
+      <Link href="/" className="fl-btn fl-btn-primary mt-6">
+        Noch einmal versuchen
+      </Link>
+    </main>
+  );
+}

src/components/ServiceWorkerRegistration.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Meldet den Service Worker an.
+ *
+ * Nur in der Produktion: im Entwicklungsmodus würde ein Zwischenspeicher
+ * dauernd veraltete Bündel ausliefern und jede Änderung verschleiern.
+ */
+export function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") return;
+    if (!("serviceWorker" in navigator)) return;
+
+    const register = () => {
+      navigator.serviceWorker.register("/sw.js").catch((error) => {
+        console.warn("Service Worker konnte nicht angemeldet werden:", error);
+      });
+    };
+
+    if (document.readyState === "complete") register();
+    else window.addEventListener("load", register, { once: true });
+  }, []);
+
+  return null;
+}