m17hr1l/psyc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage-30 fix: SW cache strategy — bump version + stale-while-revalidate

Browse Source 
User reported mobile nav still looked unresponsive. Verified the new
nav-toggle CSS and markup are deployed; the browser's service worker
was serving the prior cockpit.css cache-first from psyc-v1.

Two fixes so this can't recur:
- CACHE_VERSION bumped to psyc-v2 → the activate handler now wipes
  the v1 cache on the user's next visit.
- Static-asset strategy changed from cache-first to
  stale-while-revalidate: serve from cache for instant render, then
  refresh in the background so the *next* load picks up the new CSS/JS
  with no manual cache-busting. Falls back to network if cold.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
m17hr1l
2026-05-25 17:36:08 +02:00
parent 88e4fb1dcd
commit 4d36db90f1
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/psyc/cockpit/static/sw.js
View File

@@ -5,7 +5,7 @@
// This makes the cockpit installable as a PWA and survives flaky connections, // This makes the cockpit installable as a PWA and survives flaky connections,
// without serving stale operational data behind the operator's back. // without serving stale operational data behind the operator's back.
const CACHE_VERSION = "psyc-v1"; const CACHE_VERSION = "psyc-v2";
const STATIC_ASSETS = [ const STATIC_ASSETS = [
"/static/cockpit.css", "/static/cockpit.css",
"/static/psyc-tokens.css", "/static/psyc-tokens.css",
@@ -39,13 +39,19 @@ self.addEventListener("fetch", (event) => {
const req = event.request; const req = event.request;
if (req.method !== "GET") return; if (req.method !== "GET") return;
if (isStatic(req)) { if (isStatic(req)) {
// cache-first // stale-while-revalidate: serve from cache for speed, refresh in the
// background so subsequent loads pick up new CSS/JS without a manual
// version bump. Falls back to network if the cache is cold.
event.respondWith( event.respondWith(
caches.match(req).then((hit) => hit || fetch(req).then((resp) => { caches.open(CACHE_VERSION).then((cache) =>
const copy = resp.clone(); cache.match(req).then((hit) => {
caches.open(CACHE_VERSION).then((c) => c.put(req, copy)).catch(() => {}); const network = fetch(req).then((resp) => {
return resp; if (resp && resp.ok) cache.put(req, resp.clone()).catch(() => {});
})) return resp;
}).catch(() => hit);
return hit || network;
})
)
); );
} else { } else {
// network-first for HTML + API // network-first for HTML + API