Harmonize navigation and modals across cookbook & shopping list, fix WebSocket proxying, and add PWA offline support

app/static/manifest.json

@@ -1,21 +1,36 @@
 {
-  "name": "What To Cook? – Essens-Zufallsgenerator",
-  "short_name": "WhatToCook",
-  "description": "Zufallsgenerator für Essen mit Kategorien und Aufwandsfilter",
+  "name": "What To Cook? – Kochbuch & Einkaufsliste",
+  "short_name": "What To Cook?",
+  "description": "Familien-Kochbuch, Essensplaner und smarte Einkaufsliste",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#0f141c",
-  "theme_color": "#ff6b35",
+  "orientation": "portrait-primary",
+  "background_color": "#FAF6F0",
+  "theme_color": "#1E4D3B",
   "icons": [
     {
       "src": "/static/icon-192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/icon-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Einkaufsliste",
+      "url": "/shopping-list",
+      "description": "Direkt zur Einkaufsliste"
+    },
+    {
+      "name": "Kochbuch",
+      "url": "/cookbook",
+      "description": "Direkt zum Kochbuch"
     }
   ]
 }

app/static/sw.js

@@ -0,0 +1,100 @@
+// What To Cook? - PWA Service Worker (v1.0.0)
+const CACHE_NAME = 'wtc-cache-v1';
+const PRECACHE_URLS = [
+  '/',
+  '/cookbook',
+  '/shopping-list',
+  '/manifest.json',
+  '/static/cookbook.css',
+  '/static/icon-192.png',
+  '/static/icon-512.png'
+];
+
+// Install: Pre-cache shell assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(PRECACHE_URLS).catch((err) => {
+        console.warn('[SW] Pre-caching partial failure, continuing:', err);
+      });
+    }).then(() => self.skipWaiting())
+  );
+});
+
+// Activate: Clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+// Fetch: Strategy
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+  const url = new URL(req.url);
+
+  // Skip non-GET and WebSocket/API mutation requests
+  if (req.method !== 'GET') return;
+  if (url.pathname.startsWith('/ws/') || url.pathname.startsWith('/api/')) return;
+
+  // Navigation requests (HTML pages): Network first, fallback to cache
+  if (req.mode === 'navigate') {
+    event.respondWith(
+      fetch(req).then((response) => {
+        if (response && response.status === 200) {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(req, copy));
+        }
+        return response;
+      }).catch(async () => {
+        const cached = await caches.match(req);
+        if (cached) return cached;
+        // If exact page not cached, return home or shopping list if available
+        if (url.pathname === '/shopping-list') {
+          const shopCached = await caches.match('/shopping-list');
+          if (shopCached) return shopCached;
+        }
+        const homeCached = await caches.match('/');
+        if (homeCached) return homeCached;
+        return new Response('Offline – keine Verbindung vorhanden.', {
+          status: 503,
+          headers: { 'Content-Type': 'text/plain; charset=utf-8' }
+        });
+      })
+    );
+    return;
+  }
+
+  // Static assets: Cache-first, then network update
+  if (url.pathname.startsWith('/static/') || url.hostname.includes('fonts.googleapis.com') || url.hostname.includes('fonts.gstatic.com')) {
+    event.respondWith(
+      caches.match(req).then((cached) => {
+        if (cached) {
+          // In background, refresh cache
+          fetch(req).then((networkRes) => {
+            if (networkRes && networkRes.status === 200) {
+              caches.open(CACHE_NAME).then((cache) => cache.put(req, networkRes));
+            }
+          }).catch(() => {});
+          return cached;
+        }
+        return fetch(req).then((networkRes) => {
+          if (networkRes && networkRes.status === 200) {
+            const copy = networkRes.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(req, copy));
+          }
+          return networkRes;
+        });
+      })
+    );
+    return;
+  }
+});