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

SW: Shell-Assets nach 2,5s aus dem Cache statt endlos aufs Netz warten

Browse source 
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:
rene 2026-06-06 13:05:34 +02:00
parent 6c313aca05
commit a914101c5b
5 changed files with 55 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

64
backend/static/sw.js
View file

@ -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;
}