fix: no stale stylesheet from caches (v3.6.31)
Even with the rebuilt style.css, three caching paths could still serve the old file: - the server sent Cache-Control: no-cache only for index.html/sw.js, so browsers could heuristically cache style.css; - the SW install precached with addAll(), which re-uses HTTP-cached copies, so a new SW version could precache the stale file; - the fetch handler is cache-first (fine once the cache is fresh). Now every static shell file is served with Cache-Control: no-cache plus Last-Modified and cheap 304 revalidation, and the SW install fetches each precache URL with cache: 'reload' (CACHE simple-v304). A test pins the install behaviour. 661 frontend / 504 Python green; version 3.6.31. Note: the public demo simple.atroshin.ru is still v3.6.20 with the old stylesheet - it needs a deploy of the current frontend/.
This commit is contained in:
+1
-1
@@ -1713,7 +1713,7 @@
|
||||
// ===== Version =====
|
||||
// Single source of truth for the PWA version: shown in the header and used
|
||||
// by the server version check in pysimConnect().
|
||||
const SIMPLE_VERSION = '3.6.30';
|
||||
const SIMPLE_VERSION = '3.6.31';
|
||||
document.getElementById('app-version').textContent = 'v' + SIMPLE_VERSION;
|
||||
|
||||
// ===== Tab switching =====
|
||||
|
||||
+9
-2
@@ -1,4 +1,4 @@
|
||||
const CACHE = 'simple-v303';
|
||||
const CACHE = 'simple-v304';
|
||||
const URLS = [
|
||||
'index.html',
|
||||
'help.html',
|
||||
@@ -18,8 +18,15 @@ const URLS = [
|
||||
];
|
||||
|
||||
self.addEventListener('install', e => {
|
||||
// Fetch the shell with `cache: 'reload'`: a plain addAll() would re-use
|
||||
// HTTP-cached copies, so a new SW version could precache a stale
|
||||
// style.css/index.html (the stale-style trap, v3.6.31).
|
||||
e.waitUntil(
|
||||
caches.open(CACHE).then(c => c.addAll(URLS))
|
||||
caches.open(CACHE).then(c =>
|
||||
Promise.all(URLS.map(u => fetch(u, { cache: 'reload' }).then(r => {
|
||||
if (r && r.ok) return c.put(u, r);
|
||||
})))
|
||||
)
|
||||
);
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
@@ -55,6 +55,23 @@ function navigateEvent(url) {
|
||||
return event;
|
||||
}
|
||||
|
||||
test('install precaches every URL with cache: reload (no stale HTTP copies)', async () => {
|
||||
const calls = [];
|
||||
const { listeners, puts } = loadSW({
|
||||
fetchImpl: async (url, init) => {
|
||||
calls.push([String(url), init && init.cache]);
|
||||
return { ok: true, status: 200 };
|
||||
},
|
||||
cacheMatch: async () => undefined,
|
||||
});
|
||||
const event = { waitUntil: p => { event.promise = p; } };
|
||||
listeners.install(event);
|
||||
await event.promise;
|
||||
assert.ok(calls.length >= 10, String(calls.length));
|
||||
assert.ok(calls.every(c => c[1] === 'reload'), JSON.stringify(calls[0]));
|
||||
assert.strictEqual(puts.length, calls.length);
|
||||
});
|
||||
|
||||
test('offline navigation falls back to the cached index.html', async () => {
|
||||
const index = new FakeResponse('html');
|
||||
const { listeners } = loadSW({
|
||||
|
||||
Reference in New Issue
Block a user