Monorepo for Aesthetic.Computer
aesthetic.computer
sw: bump cache to v4 and revalidate with conditional fetch
Stale-while-revalidate was hitting the browser HTTP cache on its
revalidation fetch, so the SW-cached copy kept refreshing from an
already-stale response for the full max-age window. Using `cache:
'no-cache'` sends If-None-Match / If-Modified-Since so the origin can
return 304 or fresh 200, and the SW picks up changes on the next load.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+9
-3
+9
-3
system/public/sw.js
+9
-3
system/public/sw.js
···
1
1
// Aesthetic Computer Service Worker
2
2
// Caches JavaScript modules for faster subsequent loads
3
3
4
-
const CACHE_NAME = 'ac-modules-v3'; // Bump version to force SW update
4
+
const CACHE_NAME = 'ac-modules-v4'; // Bump version to force SW update
5
5
const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in ms (dev-friendly)
6
6
7
7
// Critical modules to precache on install
···
105
105
caches.open(CACHE_NAME).then((cache) => {
106
106
// Use clean cache key for core modules to ignore query params
107
107
return cache.match(cacheKey).then((cachedResponse) => {
108
-
const fetchPromise = fetch(event.request)
108
+
// Use `cache: 'no-cache'` so the browser sends a conditional request
109
+
// (If-None-Match / If-Modified-Since) instead of serving from the HTTP
110
+
// cache. Origin returns 304 when unchanged (cheap) or 200 with fresh
111
+
// content. Without this, stale-while-revalidate can loop on a stale
112
+
// response for up to max-age even after the origin has updated.
113
+
const revalidateRequest = new Request(event.request, { cache: 'no-cache' });
114
+
const fetchPromise = fetch(revalidateRequest)
109
115
.then(async (networkResponse) => {
110
116
// Only cache successful, complete responses
111
117
if (networkResponse.ok && networkResponse.status === 200) {
···
132
138
for (let attempt = 1; attempt <= 2; attempt++) {
133
139
try {
134
140
await new Promise(r => setTimeout(r, 500 * attempt));
135
-
const retryResponse = await fetch(event.request);
141
+
const retryResponse = await fetch(revalidateRequest);
136
142
if (retryResponse.ok) {
137
143
try {
138
144
const clone = retryResponse.clone();