refactor(pwa): auf Workbox-Standard vereinfacht, refreshing-Flag
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m17s

Der Zombie-Version-Check (858d4c1) ging über das Standard-Handshake-
Pattern hinaus. User will Industry-Standard: Workbox/web.dev-Pattern
ohne GET_VERSION-Sonderlocke.

Änderungen:
- service-worker.ts: GET_VERSION-Handler entfernt. SW reagiert nur
  noch auf SKIP_WAITING.
- pwa.svelte.ts: queryVersion + evaluateWaiting entfernt. init()
  zeigt Toast wieder schlicht bei registration.waiting (das ist
  kanonisch — bit-gleiche Bytes erzeugen keinen waiting-Slot).
- controllerchange-Listener wandert nach init() mit refreshing-Flag
  (CRA-Idiom): verhindert Doppel-Reload, wenn User zusätzlich F5
  drückt, und stellt sicher, dass der Listener in _jeder_ Session
  aktiv ist, nicht erst nach dem ersten reload()-Call.
- pwa-store.test.ts: Tests decken jetzt waiting→Toast, no-waiting→
  kein Toast, Handshake, refreshing-Flag und Sofort-Reload ab.

Der Zombie-Edge-Case (Browser-Quirk mit bit-identischem waiting-SW)
wird sich nach einmaligem Klick auflösen — erwarteter Trade-off
gegenüber der eingesparten Komplexität.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 17:57:51 +02:00
parent 858d4c1622
commit c2074c9768
4 changed files with 110 additions and 118 deletions

View File

@@ -1,10 +1,26 @@
// Standard Service-Worker-Update-Pattern (Workbox-Style, web.dev „The
// Service Worker Lifecycle"): Der SW ruft im Install-Handler NICHT
// skipWaiting() auf. Bei einem Update landet der neue SW im waiting-
// Status, wir zeigen dem User einen Toast. Klickt er „Neu laden",
// posten wir SKIP_WAITING an den wartenden SW, warten auf den
// controllerchange und reloaden einmalig — das refreshing-Flag
// verhindert den klassischen Doppel-Reload, wenn der User zusätzlich
// manuell F5 drückt.
class PwaStore {
updateAvailable = $state(false);
private registration: ServiceWorkerRegistration | null = null;
private pollTimer: ReturnType<typeof setInterval> | null = null;
private refreshing = false;
async init(): Promise<void> {
if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) return;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (this.refreshing) return;
this.refreshing = true;
location.reload();
});
try {
this.registration = await navigator.serviceWorker.ready;
} catch {
@@ -12,13 +28,10 @@ class PwaStore {
}
if (!this.registration) return;
// Wenn beim Mount schon ein waiting-SW existiert, ist das nicht
// automatisch ein echtes Update: Der Browser behält manchmal einen
// bit-identischen Zombie im waiting-Slot (Artefakt aus einer vorigen
// Session). Erst ein Version-Vergleich klärt, ob der neue SW wirklich
// anderen Code ausführen würde.
if (this.registration.waiting && this.registration.active) {
await this.evaluateWaiting(this.registration.waiting, this.registration.active);
// Waiting-SW beim Mount = echtes, vom Browser als neu erkanntes
// Update (gleiche Bytes hätten keinen waiting-Slot erzeugt).
if (this.registration.waiting) {
this.updateAvailable = true;
}
this.registration.addEventListener('updatefound', () => this.onUpdateFound());
@@ -34,52 +47,25 @@ class PwaStore {
const installing = this.registration?.installing;
if (!installing) return;
installing.addEventListener('statechange', () => {
// 'installed' UND ein laufender controller = Update für bestehenden Tab.
// 'installed' UND laufender controller = Update für bestehenden Tab.
// (Ohne controller wäre das die erste Installation, kein Update.)
if (installing.state !== 'installed' || !navigator.serviceWorker.controller) return;
const active = this.registration?.active;
if (active && active !== installing) {
void this.evaluateWaiting(installing, active);
} else {
if (installing.state === 'installed' && navigator.serviceWorker.controller) {
this.updateAvailable = true;
}
});
}
// Fragt active- und waiting-SW nach ihrer Version (per MessageChannel)
// und zeigt den Toast nur, wenn sie sich unterscheiden. Bei gleicher
// Version räumen wir den Zombie stillschweigend via SKIP_WAITING auf —
// sonst bleibt registration.waiting bei jedem Reload belegt und der
// Toast taucht endlos wieder auf.
private async evaluateWaiting(waiting: ServiceWorker, active: ServiceWorker): Promise<void> {
const [waitingVersion, activeVersion] = await Promise.all([
queryVersion(waiting),
queryVersion(active)
]);
if (waitingVersion && activeVersion && waitingVersion === activeVersion) {
waiting.postMessage({ type: 'SKIP_WAITING' });
return;
}
this.updateAvailable = true;
}
reload(): void {
this.updateAvailable = false;
const waiting = this.registration?.waiting;
if (!waiting) {
// Kein wartender SW — entweder war es nur eine Toast-Anzeige, oder
// der SW ist schon aktiv. In beiden Fällen reicht ein Reload.
// Kein wartender SW — reicht ein normaler Reload.
this.refreshing = true;
location.reload();
return;
}
// Klassisches Pattern: User-Klick → SKIP_WAITING an den wartenden
// SW → controllerchange feuert, wenn der neue SW übernimmt → dann
// reloaden wir die Seite, damit sie unter dem neuen SW läuft.
navigator.serviceWorker.addEventListener(
'controllerchange',
() => location.reload(),
{ once: true }
);
// SKIP_WAITING an den wartenden SW → activate → controllerchange →
// der Listener in init() führt den Reload aus.
waiting.postMessage({ type: 'SKIP_WAITING' });
}
@@ -88,22 +74,4 @@ class PwaStore {
}
}
function queryVersion(sw: ServiceWorker): Promise<string | null> {
return new Promise((resolve) => {
const channel = new MessageChannel();
const timer = setTimeout(() => resolve(null), 1500);
channel.port1.onmessage = (e) => {
clearTimeout(timer);
const v = (e.data as { version?: unknown } | null)?.version;
resolve(typeof v === 'string' ? v : null);
};
try {
sw.postMessage({ type: 'GET_VERSION' }, [channel.port2]);
} catch {
clearTimeout(timer);
resolve(null);
}
});
}
export const pwaStore = new PwaStore();

View File

@@ -99,14 +99,6 @@ self.addEventListener('message', (event) => {
} else if (data.type === 'SKIP_WAITING') {
// Wird vom pwaStore nach User-Klick auf "Neu laden" geschickt.
void self.skipWaiting();
} else if (data.type === 'GET_VERSION') {
// pwaStore nutzt das, um active- und waiting-SW zu vergleichen: sind
// beide bit-gleich (gleicher $service-worker-Version-Hash), dann ist
// der waiting-SW ein Zombie aus einer vorigen Session und KEIN echtes
// Update — sonst würde der "Neue Version"-Toast unbegrenzt wieder-
// kehren, weil `registration.waiting` belegt bleibt.
const port = event.ports[0] as MessagePort | undefined;
port?.postMessage({ version });
}
});