bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop the service worker from serving stale CSS/JS forever

Browse Source 
The shell cache was cache-first: once a browser had static/css/mobile.css
cached, nothing in the fetch handler ever re-requested it, so every CSS/JS
fix shipped since install stayed invisible (exactly what happened with
the crest becoming round -- an already-loaded app kept showing the old
hexagon). Switched to network-first with a cache fallback for offline use
only, and bumped the cache name so existing installs drop their stale
v1 cache on next activation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-21 14:31:49 +02:00
parent 119341001a
commit 29c05b4be6
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
mobile/templates/mobile/sw.js
View File

@@ -7,7 +7,7 @@
// offline would be actively misleading. The offline attendance queue // offline would be actively misleading. The offline attendance queue
// described in the design doc is Coach mode, a later phase. // described in the design doc is Coach mode, a later phase.
const SHELL_CACHE = "rosterchief-shell-v1"; const SHELL_CACHE = "rosterchief-shell-v2";
const SHELL_ASSETS = ["/static/css/mobile.css", "/static/js/htmx.js", "/static/js/alpine.js", "/static/js/mobile-app.js"]; const SHELL_ASSETS = ["/static/css/mobile.css", "/static/js/htmx.js", "/static/js/alpine.js", "/static/js/mobile-app.js"];
self.addEventListener("install", (event) => { self.addEventListener("install", (event) => {
@@ -24,7 +24,20 @@ self.addEventListener("activate", (event) => {
self.addEventListener("fetch", (event) => { self.addEventListener("fetch", (event) => {
if (event.request.method !== "GET" || !SHELL_ASSETS.some((asset) => event.request.url.endsWith(asset))) return; if (event.request.method !== "GET" || !SHELL_ASSETS.some((asset) => event.request.url.endsWith(asset))) return;
event.respondWith(caches.match(event.request).then((cached) => cached || fetch(event.request))); // Network-first, not cache-first: this app ships CSS/JS fixes constantly during
// active development, and a cache-first shell would leave an already-installed
// browser stuck on stale assets indefinitely (nothing ever re-triggers a fetch
// once something is cached). Falling back to the cache only when the network
// request itself fails still gives the offline-shell behaviour this exists for.
event.respondWith(
fetch(event.request)
.then((response) => {
const responseCopy = response.clone();
caches.open(SHELL_CACHE).then((cache) => cache.put(event.request, responseCopy));
return response;
})
.catch(() => caches.match(event.request)),
);
}); });
self.addEventListener("push", (event) => { self.addEventListener("push", (event) => {