Fix: Marker verschwanden offline beim Kartenbewegen — SW-503-JSON als Fehler werten

Der SW beantwortet nicht-cachebare API-GETs offline mit 503 + JSON-Body, r.json() wirft dann NICHT -> Erfolgs-Pfad ersetzte Marker durch {detail:...}. _fetchPois prueft jetzt r.ok + Array.isArray, dadurch greift der IndexedDB-Fallback (MapOffline.pois) in Phase 1 und Phase 2 behaelt den Bestand. Bump v1224
Offline-Plan: Geraetetest bestanden, Befunde (Marker offline, Banner) dokumentiert
2026-06-06 11:35:03 +02:00 · 2026-06-06 11:27:31 +02:00
7 changed files with 39 additions and 20 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-1223
+1224
--- a/backend/static/index.html
+++ b/backend/static/index.html
@ -86,14 +86,14 @@
  <title>Ban Yaro</title>

  <!-- Theme + theme-color Statusleiste vor CSS setzen -->
-  <script src="/js/boot-early.js?v=1223"></script>
+  <script src="/js/boot-early.js?v=1224"></script>

  <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=1223">
-  <link rel="stylesheet" href="/css/layout.css?v=1223">
-  <link rel="stylesheet" href="/css/components.css?v=1223">
-  <link rel="stylesheet" href="/css/utilities.css?v=1223">
-  <link rel="stylesheet" href="/css/lists.css?v=1223">
+  <link rel="stylesheet" href="/css/design-system.css?v=1224">
+  <link rel="stylesheet" href="/css/layout.css?v=1224">
+  <link rel="stylesheet" href="/css/components.css?v=1224">
+  <link rel="stylesheet" href="/css/utilities.css?v=1224">
+  <link rel="stylesheet" href="/css/lists.css?v=1224">
 </head>
 <body>

@ -612,11 +612,11 @@
 <div id="modal-container"></div>

 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=1223"></script>
-<script src="/js/ui.js?v=1223"></script>
-<script src="/js/app.js?v=1223"></script>
-<script src="/js/worlds.js?v=1223"></script>
-<script src="/js/offline-indicator.js?v=1223"></script>
+<script src="/js/api.js?v=1224"></script>
+<script src="/js/ui.js?v=1224"></script>
+<script src="/js/app.js?v=1224"></script>
+<script src="/js/worlds.js?v=1224"></script>
+<script src="/js/offline-indicator.js?v=1224"></script>

 <!-- Feature-Seiten werden lazy geladen -->

@ -626,7 +626,7 @@


 <!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
-<script src="/js/boot.js?v=1223"></script>
+<script src="/js/boot.js?v=1224"></script>


 </body>
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@ -3,7 +3,7 @@
   Router, State-Management, Navigation, Initialisierung.
   ============================================================ */

-const APP_VER     = '1223'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1224'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;
--- a/backend/static/js/pages/map.js
+++ b/backend/static/js/pages/map.js
@ -1469,12 +1469,22 @@ window.Page_map = (() => {
      }
    }

+    // POIs holen — WICHTIG: r.ok prüfen! Der SW antwortet offline auf nicht-cachebare
+    // API-GETs mit 503 + JSON-Body ({detail:…}) → r.json() wirft NICHT, der Erfolgs-Pfad
+    // liefe mit einem Objekt statt Array weiter und ersetzte die Marker durch nichts.
+    const _fetchPois = async (params) => {
+      const r = await fetch(`/api/osm/pois?${params}`);
+      if (!r.ok) throw new Error(`pois ${r.status}`);
+      const pois = await r.json();
+      return Array.isArray(pois) ? pois : [];
+    };
+
    // Phase 1: sofort DB-Daten zeigen (fast=true)
    _setOsmStatus('Lade…');
    const fastTasks = activeLayers.map(async ([layerKey, osmType]) => {
      const params = new URLSearchParams({ type: osmType, fast: 'true', ...bbox });
      try {
-        const pois = await fetch(`/api/osm/pois?${params}`).then(r => r.json());
+        const pois = await _fetchPois(params);
        _replaceOsmMarkers(layerKey, pois);
        return pois.length;
      } catch {
@ -1499,7 +1509,7 @@ window.Page_map = (() => {
    const freshTasks = activeLayers.map(async ([layerKey, osmType]) => {
      const params = new URLSearchParams({ type: osmType, ...bbox });
      try {
-        const pois = await fetch(`/api/osm/pois?${params}`).then(r => r.json());
+        const pois = await _fetchPois(params);
        const osmCount = _osmCountOf(layerKey);
        if (pois.length !== osmCount) _replaceOsmMarkers(layerKey, pois);
        _done++;
--- a/backend/static/landing.html
+++ b/backend/static/landing.html
@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
-  <script src="/js/landing-init.js?v=1223"></script>
+  <script src="/js/landing-init.js?v=1224"></script>
  <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
  <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
  <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@ -4,7 +4,7 @@
   ============================================================ */

 // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
-const VER           = '1223';
+const VER           = '1224';
 const CACHE_VERSION = `by-v${VER}`;
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
--- a/docs/OFFLINE_MAPS_PLAN.md
+++ b/docs/OFFLINE_MAPS_PLAN.md
@ -29,9 +29,18 @@
 - **Raster-Prefetch gegated:** `offline-indicator.js init()` überspringt `_prefetchTiles()` im
  Offline-Tiles-Modus (GL nutzt das OSM-Raster nicht).

+**✅ Gerätetest-Befunde behoben (2026-06-06, v1223) — Gerätetest iOS BESTANDEN (Basemap+Labels offline ok):**
+- **POI-Marker offline:** `downloadAround` speichert zusätzlich `/api/osm/pois` (fast=true, liest lokale
+  osm_pois-DB) je Typ für die Region-Bbox in IndexedDB (Key-Präfix `p/<type>`, Merge per id — zweite
+  Region löscht die erste nicht). `MapOffline.pois(type, bbox)` filtert für den Ausschnitt; map.js
+  Phase-1-Catch fällt offline darauf zurück. POI-Typen-Liste in map-offline.js synchron mit
+  `OSM_LAYER_MAP` (pages/map.js) halten! Marker erscheinen erst nach ERNEUTEM Region-Download.
+- **Offline-Banner** klappt 5 s nach Offline-Gang auf schmale Icon-Leiste ein (volles Banner verdeckte
+  die Karten-Legende); Banner-Styles von index.html-Inline nach components.css konsolidiert.
+
 **🔲 Offen (Follow-ups Runde 2):**
- **Gerätetest (iOS-PWA offline/IndexedDB)** auf Staging — jetzt ohne Flag-Frickelei möglich (Default AN).
-  Danach: Prod-Freigabe-Entscheidung (Default-Hostnames erweitern analog `by_map_gl`).
+- **Gerätetest-Nachtest** (Marker offline + Banner-Einklappen, v1223) → dann Prod-Freigabe-Entscheidung
+  (Default-Hostnames erweitern analog `by_map_gl`).
 - **Adaptives Lernen** (rollendes Vorausladen beim Aufzeichnen + Funkloch-Gedächtnis).
 - **Bereichsauswahl / Routen-Korridor** (inkl. „Route offline speichern" aus routes.js `_openDetail`).
 - Alten OSM-Raster-Prefetch (`offline-indicator.js _prefetchTiles` + `map.js _cacheTiles`) komplett