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/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,
   };
 })();