Offline-Karten Follow-ups: Staging-Default AN, Karten-Download-Button, Glyph-Persistenz

- by_offline_tiles Default AN auf staging.banyaro.app (localStorage/?tilesoffline=1/0 uebersteuert)
- Speed-Dial 'Karte offline speichern': GL -> MapOffline.downloadAround(Kartenmitte, 5km),
  Leaflet -> alter Raster-Prefetch (_cacheTiles war seit FAB-Redesign verwaist)
- Glyphs in IndexedDB (Key-Praefix f/) + byt://f/-Protokoll: ueberlebt App-Updates
- OSM-Raster-Prefetch im Offline-Tiles-Modus uebersprungen (GL nutzt das Raster nicht)
- Button-Sichtbarkeit gated: GL ohne Offline-Flag (= Production) zeigt ihn nicht

backend/static/js/boot.js

@@ -24,6 +24,10 @@
     // MapLibre-GL-Karte (zentrale Karte) aus ?mapgl=1/0 — wird in pages/map.js _useGL() ausgewertet.
     var mg = new URLSearchParams(location.search).get('mapgl');
     if (mg !== null) localStorage.setItem('by_map_gl', mg === '0' ? '0' : '1');
+    // Offline-Vektorkacheln (byt://) aus ?tilesoffline=1/0 — wird in map-gl-style.js
+    // _offlineEnabled() ausgewertet (Staging-Default AN, localStorage übersteuert).
+    var to = new URLSearchParams(location.search).get('tilesoffline');
+    if (to !== null) localStorage.setItem('by_offline_tiles', to === '0' ? '0' : '1');
   } catch (e) {}
 })();
 

backend/static/js/map-gl-style.js

@@ -12,10 +12,16 @@
   var TILES_VER  = '20260605';
   function tilesUrl() { return window.location.origin + '/tiles/' + TILES_FILE + '?v=' + TILES_VER; }
 
-  // Offline-Tiles-Modus (byt://-Quelle). Opt-in via localStorage by_offline_tiles='1' bzw. ?tilesoffline=1.
-  // Default AUS, bis auf Gerät verifiziert — dann hier auf Staging-Default umstellen (analog by_map_gl).
+  // Offline-Tiles-Modus (byt://-Quelle). localStorage by_offline_tiles bzw. ?tilesoffline=1/0 übersteuert.
+  // Staging-Default AN seit 2026-06-06 (Gerätetest); Production bleibt AUS bis Freigabe (dann analog by_map_gl).
+  // ACHTUNG: Default-Logik synchron halten mit offline-indicator.js _offlineTilesMode().
   function _offlineEnabled() {
-    try { return localStorage.getItem('by_offline_tiles') === '1'; } catch (e) { return false; }
+    try {
+      var flag = localStorage.getItem('by_offline_tiles');
+      if (flag === '1') return true;
+      if (flag === '0') return false;
+      return location.hostname === 'staging.banyaro.app';
+    } catch (e) { return false; }
   }
 
   var THEMES = {
@@ -52,7 +58,11 @@
       : { type: 'vector', url: 'pmtiles://' + tilesUrl() };
     return {
       version: 8,
-      glyphs: window.location.origin + '/fonts/{fontstack}/{range}.pbf',
+      // Offline-Modus: Glyphs übers byt://f/-Protokoll (IndexedDB-first, remote-Fallback) —
+      // der SW-Cache für /fonts wird bei App-Updates gepurged, IndexedDB nicht.
+      glyphs: useOffline
+        ? 'byt://f/{fontstack}/{range}'
+        : window.location.origin + '/fonts/{fontstack}/{range}.pbf',
       sources: {
         by: src,
       },

backend/static/js/map-offline.js

@@ -52,17 +52,22 @@ window.MapOffline = (function () {
     });
   }
 
-  // MapLibre-Protokoll `byt://t/{z}/{x}/{y}` registrieren (idempotent).
+  // MapLibre-Protokolle registrieren (idempotent):
+  //   byt://t/{z}/{x}/{y}          → Vektorkachel (MVT)
+  //   byt://f/{fontstack}/{range}  → Glyph-PBF (fontstack ggf. URL-encodiert, je nach MapLibre-Version)
   function registerProtocol() {
     if (registerProtocol._done || typeof maplibregl === 'undefined') return;
     registerProtocol._done = true;
     maplibregl.addProtocol('byt', function (params) {
-      var m = /byt:\/\/t\/(\d+)\/(\d+)\/(\d+)/.exec(params.url);
-      if (!m) return Promise.resolve({ data: new ArrayBuffer(0) });
-      return tile(+m[1], +m[2], +m[3]).then(function (u) {
+      var ret = function (u) {
         if (!u) return { data: new ArrayBuffer(0) };
         return { data: u.buffer.slice(u.byteOffset, u.byteOffset + u.byteLength) };
-      });
+      };
+      var t = /byt:\/\/t\/(\d+)\/(\d+)\/(\d+)/.exec(params.url);
+      if (t) return tile(+t[1], +t[2], +t[3]).then(ret);
+      var f = /byt:\/\/f\/([^/]+)\/(\d+-\d+)/.exec(params.url);
+      if (f) return glyph(decodeURIComponent(f[1]), f[2]).then(ret);
+      return Promise.resolve({ data: new ArrayBuffer(0) });
     });
   }
 
@@ -82,21 +87,39 @@ window.MapOffline = (function () {
     return list;
   }
 
-  // Glyphs (Open Sans Regular/Semibold, Latin + Latin-Extended) holen, damit der Service-Worker sie cacht.
+  // Glyphs (Open Sans Regular/Semibold, Latin + Latin-Extended) in IndexedDB persistieren
+  // (Key-Präfix 'f/' im Tiles-Store, kein Schema-Bump) — überlebt App-Updates, anders als der
+  // SW-Cache, der beim Update gepurged wird. Offline serviert übers byt://f/-Protokoll.
   // KRITISCH: ohne Glyphs lässt MapLibre offline die GANZE Kachel fallen (nicht nur die Labels) → leer.
-  // 0-255 + 256-511 deckt DE/FR/PL/CZ/IT-Sonderzeichen ab. (Persistenz über App-Updates = Follow-up.)
+  // 0-255 + 256-511 deckt DE/FR/PL/CZ/IT-Sonderzeichen ab.
   var FONTS = ['Open Sans Regular', 'Open Sans Semibold'], RANGES = ['0-255', '256-511'];
+  function _glyphUrl(font, range) { return '/fonts/' + encodeURIComponent(font) + '/' + range + '.pbf'; }
   function _cacheGlyphs() {
     var bytes = 0, jobs = [];
     FONTS.forEach(function (f) { RANGES.forEach(function (rg) {
-      jobs.push(fetch('/fonts/' + encodeURIComponent(f) + '/' + rg + '.pbf')
+      jobs.push(fetch(_glyphUrl(f, rg))
         .then(function (r) { return r.ok ? r.arrayBuffer() : null; })
-        .then(function (b) { if (b) bytes += b.byteLength; })
+        .then(function (b) {
+          if (!b) return;
+          bytes += b.byteLength;
+          return _put('f/' + f + '/' + rg, new Uint8Array(b));
+        })
         .catch(function () {}));
     }); });
     return Promise.all(jobs).then(function () { return bytes; });
   }
 
+  // Glyph-Bytes für fontstack/range — IndexedDB zuerst, sonst remote (online), sonst null.
+  function glyph(font, range) {
+    return _get('f/' + font + '/' + range).then(function (hit) {
+      if (hit) return hit instanceof Uint8Array ? hit : new Uint8Array(hit);
+      return fetch(_glyphUrl(font, range))
+        .then(function (r) { return r.ok ? r.arrayBuffer() : null; })
+        .then(function (b) { return b ? new Uint8Array(b) : null; })
+        .catch(function () { return null; });
+    });
+  }
+
   // Bereich um lat/lon (radiusKm, Default 5) herunterladen + in IndexedDB ablegen.
   // onProgress({done,total,bytes}). Liefert {tiles,bytes}.
   function downloadAround(lat, lon, radiusKm, onProgress) {
@@ -135,7 +158,7 @@ window.MapOffline = (function () {
   }
 
   return {
-    registerProtocol: registerProtocol, downloadAround: downloadAround, tile: tile,
+    registerProtocol: registerProtocol, downloadAround: downloadAround, tile: tile, glyph: glyph,
     stats: stats, hasRegion: hasRegion, clear: clear, MAXZOOM: MAXZOOM,
   };
 })();

backend/static/js/offline-indicator.js

@@ -21,8 +21,15 @@ window.OfflineIndicator = (() => {
   }
 
   // GL-Offline-Tiles-Modus (byt://-Vektorkacheln in IndexedDB) statt OSM-Raster.
+  // Default-Logik MUSS map-gl-style.js _offlineEnabled() entsprechen (Staging-AN seit 2026-06-06);
+  // dupliziert weil map-gl-style.js lazy mit der GL-Karte lädt, dieses Modul aber sofort.
   function _offlineTilesMode() {
-    try { return localStorage.getItem('by_offline_tiles') === '1'; } catch (e) { return false; }
+    try {
+      const flag = localStorage.getItem('by_offline_tiles');
+      if (flag === '1') return true;
+      if (flag === '0') return false;
+      return location.hostname === 'staging.banyaro.app';
+    } catch (e) { return false; }
   }
   // Ist eine Offline-Region (Vektorkacheln) in IndexedDB gespeichert? (ohne MapOffline zu laden)
   // WICHTIG: dasselbe Schema/Version wie map-offline.js anlegen — sonst legt ein versionsloses open()
@@ -373,7 +380,9 @@ window.OfflineIndicator = (() => {
   function init() {
     refresh();
     _prefetchPages();
-    _prefetchTiles();
+    // OSM-Raster-Prefetch nur für die Leaflet-Karte — die GL-Karte (byt://-Vektorkacheln)
+    // nutzt das Raster nicht. Komplett-Entfernung wenn Flag dauerhaft AN (OFFLINE_MAPS_PLAN.md).
+    if (!_offlineTilesMode()) _prefetchTiles();
     _prefetchData();
     _bindLongPress();
 

backend/static/js/pages/map.js

@@ -257,6 +257,11 @@ window.Page_map = (() => {
               <span class="map-sd-label">Marker setzen</span>
               <button class="map-sd-btn map-fab--pin" id="map-pin-btn" title="Marker setzen"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg></button>
             </div>
+            ${(!_useGL() || _offlineTilesEnabled()) ? `
+            <div class="map-sd-item">
+              <span class="map-sd-label">Karte offline speichern</span>
+              <button class="map-sd-btn" id="map-offline-btn" title="Karte offline speichern"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#cloud-arrow-down"></use></svg></button>
+            </div>` : ''}
             ${App.hasPro(_appState?.user) ? `
             <div class="map-sd-item">
               <span class="map-sd-label">Regenradar</span>
@@ -368,6 +373,11 @@ window.Page_map = (() => {
       _sdEl?.classList.remove('open');
       _togglePlacementMode();
     });
+    document.getElementById('map-offline-btn')?.addEventListener('click', () => {
+      _sdEl?.classList.remove('open');
+      if (_engineGL) _downloadVectorRegion();   // GL: Vektorkacheln → IndexedDB (byt://)
+      else _cacheTiles();                       // Leaflet: OSM-Raster → SW-Cache
+    });
     document.getElementById('map-radar-btn')?.addEventListener('click', () => {
       _sdEl?.classList.remove('open');
       _toggleRadar();
@@ -763,6 +773,18 @@ window.Page_map = (() => {
     } catch (e) { return false; }
   }
 
+  // Offline-Vektorkacheln-Flag — gleiche Default-Logik wie map-gl-style.js _offlineEnabled()
+  // (dupliziert, weil map-gl-style.js erst mit der GL-Karte lazy lädt, das Markup aber sofort rendert).
+  // Steuert nur die Button-Sichtbarkeit: im GL-Modus ohne byt://-Quelle wäre der Download nutzlos.
+  function _offlineTilesEnabled() {
+    try {
+      const flag = localStorage.getItem('by_offline_tiles');
+      if (flag === '1') return true;
+      if (flag === '0') return false;
+      return location.hostname === 'staging.banyaro.app';
+    } catch (e) { return false; }
+  }
+
   function loadMapLibre() {
     if (_maplibreLoaded) return Promise.resolve();
     const v = '?v=' + (window.APP_VER || '');
@@ -2115,6 +2137,31 @@ window.Page_map = (() => {
     return urls;
   }
 
+  // GL-Modus: Vektorkacheln (5 km um die Kartenmitte) + Glyphs → IndexedDB (byt://).
+  // Gegenstück zum Welten-FAB-Download (GPS-Position) — hier zählt die KARTENMITTE,
+  // damit man eine entfernte Gegend (Urlaubsort) vorab speichern kann. docs/OFFLINE_MAPS_PLAN.md
+  async function _downloadVectorRegion() {
+    if (!_map || !window.MapOffline) return;
+    const btn = document.getElementById('map-offline-btn');
+    if (btn?.classList.contains('loading')) return;          // läuft bereits
+    const c = _map.getCenter();
+    btn?.classList.add('loading');
+    _setOsmStatus('Offline: 0 %…');
+    try {
+      const res = await MapOffline.downloadAround(c.lat, c.lng, 5, p => {
+        _setOsmStatus(`Offline: ${Math.round(p.done / p.total * 100)} %…`);
+      });
+      _setOsmStatus('');
+      UI.toast.success(`Gegend offline gespeichert — ${res.tiles} Kacheln, ${(res.bytes / 1048576).toFixed(1)} MB.`);
+      window.OfflineIndicator?.refresh();                     // Pfoten-Segment 5 sofort grün
+    } catch (e) {
+      _setOsmStatus('');
+      UI.toast.error('Offline-Download fehlgeschlagen — bitte erneut versuchen.');
+    } finally {
+      btn?.classList.remove('loading');
+    }
+  }
+
   async function _cacheTiles() {
     if (!_map) return;
     if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) {