From 70a1f5856a034c9288860cce717568a2f7077fd4 Mon Sep 17 00:00:00 2001 From: rene Date: Sat, 6 Jun 2026 11:03:46 +0200 Subject: [PATCH] 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 | 4 +++ backend/static/js/map-gl-style.js | 18 +++++++--- backend/static/js/map-offline.js | 43 +++++++++++++++++------ backend/static/js/offline-indicator.js | 13 +++++-- backend/static/js/pages/map.js | 47 ++++++++++++++++++++++++++ 5 files changed, 109 insertions(+), 16 deletions(-) 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()) ? ` +
+ Karte offline speichern + +
` : ''} ${App.hasPro(_appState?.user) ? `
Regenradar @@ -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) {