rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Mehr Offline-Seiten precachen + nur Strich grün, SW by-v1085

Browse source 
PRIORITY_PAGES erweitert auf 10 Seiten (war 8): zusätzlich
health.js, notes.js, expenses.js. admin.js raus — 233 KB, offline
irrelevant. Damit funktionieren offline ohne vorherigen Besuch:
Tagebuch · Gesundheit · Karte · Gassi · Erste Hilfe · Notizblock
Ausgaben · Routen · Giftköder · Vermisst.

Offline-Indikator Step 2 prüft jetzt alle 7 vom User genannten
Seiten (diary, map, walks, erste-hilfe, notes, expenses, routes) —
Pfote wird grün wenn alle im Static-Cache sind.

CSS-Färbung umgestellt: nur stroke (Linie) wird grün, kein fill
mehr. Pfote behält ihre offene Optik, nur die Outlines wechseln
von weiß zu Grün.
This commit is contained in:
rene 2026-05-26 15:14:07 +02:00
parent 95dccd03be
commit 94f02dbe3a
6 changed files with 22 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/main.py
View file

@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "1084" # muss mit APP_VER in app.js übereinstimmen APP_VER = "1085" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

7
backend/static/css/components.css
View file

@ -8872,12 +8872,11 @@ svg.empty-state-icon {
(Default = weiß auf orange, filled = grün auf orange) (Default = weiß auf orange, filled = grün auf orange)
============================================================ */ ============================================================ */
#worlds-fab .offline-paw .paw-elem { #worlds-fab .offline-paw .paw-elem {
color: #fff; color: #fff; /* stroke via currentColor — fill bleibt 'none' aus HTML */
transition: stroke 0.4s ease, fill 0.4s ease; transition: stroke 0.4s ease;
} }
#worlds-fab .offline-paw .paw-elem.filled { #worlds-fab .offline-paw .paw-elem.filled {
color: #16a34a; /* leuchtendes Grün, klar sichtbar auf orange */ color: #16a34a; /* nur Linie grün, kein Ausfüllen */
fill: #16a34a;
} }
.offline-status-row { .offline-status-row {

16
backend/static/index.html
View file

@ -101,9 +101,9 @@
</script> </script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1084"> <link rel="stylesheet" href="/css/design-system.css?v=1085">
<link rel="stylesheet" href="/css/layout.css?v=1084"> <link rel="stylesheet" href="/css/layout.css?v=1085">
<link rel="stylesheet" href="/css/components.css?v=1084"> <link rel="stylesheet" href="/css/components.css?v=1085">
</head> </head>
<body> <body>
@ -625,11 +625,11 @@
<div id="modal-container"></div> <div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features --> <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1084"></script> <script src="/js/api.js?v=1085"></script>
<script src="/js/ui.js?v=1084"></script> <script src="/js/ui.js?v=1085"></script>
<script src="/js/app.js?v=1084"></script> <script src="/js/app.js?v=1085"></script>
<script src="/js/worlds.js?v=1084"></script> <script src="/js/worlds.js?v=1085"></script>
<script src="/js/offline-indicator.js?v=1084"></script> <script src="/js/offline-indicator.js?v=1085"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '1084'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1085'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt 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_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION; window.APP_VERSION = APP_VERSION;

6
backend/static/js/offline-indicator.js
View file

@ -31,11 +31,11 @@ window.OfflineIndicator = (() => {
} }, } },
{ step: 2, title: 'Wichtige Seiten', { step: 2, title: 'Wichtige Seiten',
detail: 'Tagebuch, Karte, Gassi, Erste Hilfe', detail: 'Tagebuch, Karte, Gassi, Erste Hilfe, Notizblock, Ausgaben, Routen',
probe: async () => { probe: async () => {
const c = await _staticCache(); const c = await _staticCache();
if (!c) return false; if (!c) return false;
const must = ['diary.js','map.js','walks.js','erste-hilfe.js']; const must = ['diary.js','map.js','walks.js','erste-hilfe.js','notes.js','expenses.js','routes.js'];
const urls = (await c.keys()).map(r => r.url); const urls = (await c.keys()).map(r => r.url);
return must.every(name => urls.some(u => u.includes('/js/pages/' + name))); return must.every(name => urls.some(u => u.includes('/js/pages/' + name)));
} }, } },
@ -141,7 +141,7 @@ window.OfflineIndicator = (() => {
const tasks = []; const tasks = [];
for (const m of missing) { for (const m of missing) {
if (m.step === 2) { if (m.step === 2) {
['diary.js','map.js','walks.js','erste-hilfe.js'].forEach(p => ['diary.js','map.js','walks.js','erste-hilfe.js','notes.js','expenses.js','routes.js'].forEach(p =>
tasks.push(fetch(`/js/pages/${p}?v=${window.APP_VER}`).catch(() => {}))); tasks.push(fetch(`/js/pages/${p}?v=${window.APP_VER}`).catch(() => {})));
} else if (m.step === 3) { } else if (m.step === 3) {
const dogId = window._appState?.activeDog?.id; const dogId = window._appState?.activeDog?.id;

9
backend/static/sw.js
View file

@ -4,19 +4,22 @@
============================================================ */ ============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1084'; const VER = '1085';
const CACHE_VERSION = `by-v${VER}`; const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache
// Prioritäts-Seiten: werden nach Install im Hintergrund gecacht (nicht blockierend) // Prioritäts-Seiten: werden nach Install im Hintergrund gecacht (nicht blockierend)
// Diese Seiten MÜSSEN offline funktionieren — auch wenn der User sie noch nie geöffnet hat.
const PRIORITY_PAGES = [ const PRIORITY_PAGES = [
'/js/pages/admin.js',
'/js/pages/erste-hilfe.js',
'/js/pages/diary.js', '/js/pages/diary.js',
'/js/pages/health.js',
'/js/pages/map.js', '/js/pages/map.js',
'/js/pages/walks.js', '/js/pages/walks.js',
'/js/pages/erste-hilfe.js',
'/js/pages/notes.js',
'/js/pages/expenses.js',
'/js/pages/routes.js', '/js/pages/routes.js',
'/js/pages/poison.js', '/js/pages/poison.js',
'/js/pages/lost.js', '/js/pages/lost.js',