Fix stale UI cache with network-first app shell and forced SW updates

This commit is contained in:
Nate committed 2026-03-16 14:57:59 -04:00
1 parent defdfe2200
commit 5003d3ec09
2 files changed
+35 -2

No files matched your search

+12 -1
View File
@@ -297,7 +297,18 @@
<script src="app.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.update().catch(() => {});
});
let refreshing = false;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (refreshing) return;
refreshing = true;
window.location.reload();
});
});
}
</script>
</body>
+23 -1
View File
@@ -1,6 +1,6 @@
'use strict';
const CACHE = 'weather-v2';
const CACHE = 'weather-v3';
// App shell — cached on install for offline use
const PRECACHE = [
@@ -45,6 +45,28 @@ self.addEventListener('fetch', event => {
return;
}
const isAppShellRequest =
request.mode === 'navigate' ||
request.destination === 'document' ||
request.destination === 'script' ||
request.destination === 'style';
// Prefer fresh app shell assets so UI updates are visible immediately.
if (isAppShellRequest) {
event.respondWith(
fetch(request)
.then(response => {
if (response.ok) {
const clone = response.clone();
caches.open(CACHE).then(cache => cache.put(request, clone));
}
return response;
})
.catch(() => caches.match(request).then(cached => cached || caches.match('/')))
);
return;
}
event.respondWith(
caches.match(request).then(cached => {
if (cached) return cached;