SW: Shell-Assets nach 2,5s aus dem Cache statt endlos aufs Netz warten
Bei schwachem Empfang blieb die App beim Start SEHR LANGE weiss: CSS + Kern-JS + index.html waren Network-First OHNE Timeout — der Cache griff nur bei hartem Fetch-Fehler, nicht bei troepfelnder Verbindung. Jetzt: Promise.race(Netz, 2,5s) -> Cache-Fallback (stale-while-revalidate, Netz aktualisiert den Cache im Hintergrund weiter). Versions-Updates laufen weiter ueber x-app-version + controllerchange. Bump v1232
This commit is contained in:
parent
6c313aca05
commit
a914101c5b
5 changed files with 55 additions and 39 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
1231
|
||||
1232
|
||||
|
|
@ -86,14 +86,14 @@
|
|||
<title>Ban Yaro</title>
|
||||
|
||||
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
|
||||
<script src="/js/boot-early.js?v=1231"></script>
|
||||
<script src="/js/boot-early.js?v=1232"></script>
|
||||
|
||||
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
|
||||
<link rel="stylesheet" href="/css/design-system.css?v=1231">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=1231">
|
||||
<link rel="stylesheet" href="/css/components.css?v=1231">
|
||||
<link rel="stylesheet" href="/css/utilities.css?v=1231">
|
||||
<link rel="stylesheet" href="/css/lists.css?v=1231">
|
||||
<link rel="stylesheet" href="/css/design-system.css?v=1232">
|
||||
<link rel="stylesheet" href="/css/layout.css?v=1232">
|
||||
<link rel="stylesheet" href="/css/components.css?v=1232">
|
||||
<link rel="stylesheet" href="/css/utilities.css?v=1232">
|
||||
<link rel="stylesheet" href="/css/lists.css?v=1232">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -612,11 +612,11 @@
|
|||
<div id="modal-container"></div>
|
||||
|
||||
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
|
||||
<script src="/js/api.js?v=1231"></script>
|
||||
<script src="/js/ui.js?v=1231"></script>
|
||||
<script src="/js/app.js?v=1231"></script>
|
||||
<script src="/js/worlds.js?v=1231"></script>
|
||||
<script src="/js/offline-indicator.js?v=1231"></script>
|
||||
<script src="/js/api.js?v=1232"></script>
|
||||
<script src="/js/ui.js?v=1232"></script>
|
||||
<script src="/js/app.js?v=1232"></script>
|
||||
<script src="/js/worlds.js?v=1232"></script>
|
||||
<script src="/js/offline-indicator.js?v=1232"></script>
|
||||
|
||||
<!-- Feature-Seiten werden lazy geladen -->
|
||||
|
||||
|
|
@ -626,7 +626,7 @@
|
|||
|
||||
|
||||
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
|
||||
<script src="/js/boot.js?v=1231"></script>
|
||||
<script src="/js/boot.js?v=1232"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '1231'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '1232'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
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_VERSION = APP_VERSION;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<script src="/js/landing-init.js?v=1231"></script>
|
||||
<script src="/js/landing-init.js?v=1232"></script>
|
||||
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
|
||||
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
|
||||
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
============================================================ */
|
||||
|
||||
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
|
||||
const VER = '1231';
|
||||
const VER = '1232';
|
||||
const CACHE_VERSION = `by-v${VER}`;
|
||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||
|
|
@ -362,36 +362,52 @@ self.addEventListener('fetch', event => {
|
|||
return;
|
||||
}
|
||||
|
||||
// CSS, Core-JS + Seiten-Module: Network-First mit ignoreSearch-Fallback für Offline
|
||||
// CSS, Core-JS + Seiten-Module: Network-First — aber nach 2,5 s ohne Antwort kommt der
|
||||
// CACHE (stale-while-revalidate): bei schwachem Empfang blieb die App sonst SEHR LANGE
|
||||
// weiß, weil der Fetch nicht fehlschlägt, sondern tröpfelt (Gerätetest 2026-06-08).
|
||||
// Das Netz-Ergebnis aktualisiert den Cache im Hintergrund weiter; echte Versions-Updates
|
||||
// zieht der Update-Mechanismus (x-app-version + controllerchange) ohnehin separat.
|
||||
if (url.pathname.startsWith('/css/') || url.pathname.startsWith('/js/pages/')
|
||||
|| url.pathname.startsWith('/js/app.js') || url.pathname.startsWith('/js/ui.js')
|
||||
|| url.pathname.startsWith('/js/api.js') || url.pathname.startsWith('/js/worlds.js')) {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
const clone = response.clone();
|
||||
caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
|
||||
}
|
||||
return response;
|
||||
})
|
||||
.catch(() => caches.match(event.request, { ignoreSearch: true })
|
||||
.then(cached => cached || new Response('', { status: 503 })))
|
||||
);
|
||||
event.respondWith((async () => {
|
||||
const network = fetch(event.request).then(response => {
|
||||
if (response.ok) {
|
||||
const clone = response.clone();
|
||||
caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
|
||||
}
|
||||
return response;
|
||||
});
|
||||
const winner = await Promise.race([
|
||||
network.catch(() => null),
|
||||
new Promise(res => setTimeout(() => res(null), 2500)),
|
||||
]);
|
||||
if (winner) return winner;
|
||||
const cached = await caches.match(event.request, { ignoreSearch: true });
|
||||
if (cached) { network.catch(() => {}); return cached; } // Netz läuft im Hintergrund weiter
|
||||
return network.catch(() => new Response('', { status: 503 }));
|
||||
})());
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigation (index.html): immer Network-First
|
||||
// Navigation (index.html): Network-First, nach 2,5 s ohne Antwort die gecachte Shell
|
||||
// (gleicher Schwachempfang-Schutz wie oben; Offline-Fallback bleibt caches.match('/')).
|
||||
if (event.request.mode === 'navigate') {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then(response => {
|
||||
const clone = response.clone();
|
||||
caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
|
||||
return response;
|
||||
})
|
||||
.catch(() => caches.match('/'))
|
||||
);
|
||||
event.respondWith((async () => {
|
||||
const network = fetch(event.request).then(response => {
|
||||
const clone = response.clone();
|
||||
caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
|
||||
return response;
|
||||
});
|
||||
const winner = await Promise.race([
|
||||
network.catch(() => null),
|
||||
new Promise(res => setTimeout(() => res(null), 2500)),
|
||||
]);
|
||||
if (winner) return winner;
|
||||
const cached = await caches.match('/');
|
||||
if (cached) { network.catch(() => {}); return cached; }
|
||||
return network.catch(() => caches.match('/'));
|
||||
})());
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue