diff --git a/backend/static/js/boot.js b/backend/static/js/boot.js index 85becee..8a8421c 100644 --- a/backend/static/js/boot.js +++ b/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) {} })(); diff --git a/backend/static/js/map-gl-style.js b/backend/static/js/map-gl-style.js index 9a02bc9..97da80d 100644 --- a/backend/static/js/map-gl-style.js +++ b/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, }, diff --git a/backend/static/js/map-offline.js b/backend/static/js/map-offline.js index 76741ee..78db35c 100644 --- a/backend/static/js/map-offline.js +++ b/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, }; })(); diff --git a/backend/static/js/offline-indicator.js b/backend/static/js/offline-indicator.js index 55e93b1..7d7e9c4 100644 --- a/backend/static/js/offline-indicator.js +++ b/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(); diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js index 9f06461..75d0d30 100644 --- a/backend/static/js/pages/map.js +++ b/backend/static/js/pages/map.js @@ -257,6 +257,11 @@ window.Page_map = (() => { Marker setzen + ${(!_useGL() || _offlineTilesEnabled()) ? ` +