Changeset b08b5bc in Klonkt

Timestamp:

06/18/2026 04:30:54 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

85d9fda

Parents:

91d948c

Message:

SW: intercept navigations only — fix broken images after refresh

The service-worker fetch handler intercepted ALL GET requests with
fetch().catch(() => caches.match(request)). If the network fetch failed
briefly (e.g. during the daily SW version swap with skipWaiting+clients.claim),
caches.match for an uncached image returned undefined →
respondWith(undefined) → broken image on a normal refresh. Hard reload
bypasses the SW and therefore worked.

Now the SW only intercepts navigate requests (HTML) for an offline
fallback to the cached '/'; images/CSS/JS/media pass through natively.
CACHE_VERSION → v11 forces activation + cleanup of old caches.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/server.js (modified) (2 diffs)

src/server.js

@@ -341 +341 @@
   res.set('Cache-Control', 'no-cache');
   res.send(`
-const CACHE_VERSION = 'pcms-v10-' + new Date().toISOString().split('T')[0];
+const CACHE_VERSION = 'pcms-v11-' + new Date().toISOString().split('T')[0];
 self.addEventListener('install', e => {
   e.waitUntil(caches.open(CACHE_VERSION).then(c => c.addAll(['/'])));
@@ -352 +352 @@
   self.clients.claim();
 });
+// ALLEEN navigaties (HTML-pagina's) onderscheppen, voor een offline-fallback.
+// Afbeeldingen, CSS, JS en /media NIET aanraken — laat de browser die native
+// afhandelen. Anders kon een mislukte netwerk-fetch terugvallen op een lege
+// cache-match (undefined) en zo een afbeelding "kapot" maken bij een gewone
+// refresh (hard reload omzeilt de SW en werkte daarom wél).
 self.addEventListener('fetch', e => {
   if (e.request.method !== 'GET') return;
-  e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
+  if (e.request.mode !== 'navigate') return; // alleen page-loads
+  e.respondWith(
+    fetch(e.request).catch(() => caches.match('/').then(r => r || Response.error()))
+  );
 });
   `);