feat: implement PWA, manifest, service worker and offline indicator

src/components/OfflineIndicator.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { WifiOff } from 'lucide-react';
+
+export default function OfflineIndicator() {
+    const [isOffline, setIsOffline] = useState(false);
+
+    useEffect(() => {
+        setIsOffline(!navigator.onLine);
+
+        const handleOnline = () => setIsOffline(false);
+        const handleOffline = () => setIsOffline(true);
+
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+        };
+    }, []);
+
+    if (!isOffline) return null;
+
+    return (
+        <div className="fixed top-0 left-0 w-full bg-red-600 text-white text-[10px] font-black uppercase tracking-widest py-1 flex items-center justify-center gap-2 z-[9999] animate-pulse">
+            <WifiOff size={12} />
+            Offline-Modus: Du siehst eine gespeicherte Version
+        </div>
+    );
+}

src/components/PWARegistration.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function PWARegistration() {
+    useEffect(() => {
+        if ('serviceWorker' in navigator && window.location.hostname !== 'localhost') {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker
+                    .register('/sw.js')
+                    .then((registration) => {
+                        console.log('SW registered: ', registration);
+                    })
+                    .catch((registrationError) => {
+                        console.log('SW registration failed: ', registrationError);
+                    });
+            });
+        }
+    }, []);
+
+    return null;
+}