theoandClaude Sonnet 5
281eb1406f
Op een kiosk-scherm dat nooit navigeert gebeurt de browser-eigen update-check voor de service worker onvoorspelbaar laat (soms pas bij de dagelijkse 04:00-reload). Roep nu expliciet registration.update() aan bij het opstarten, elke 5 minuten en bij elke visibilitychange naar zichtbaar. Ook een eerdere niet-bedoelde dubbele registerServiceWorker()-aanroep bij visibilitychange verwijderd (ontstaan door een brede Python str.replace zonder count-limiet). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
/* Service worker: app-shell cache-first, API network-first met timeout en fallback op de laatste response. */
|
|
|
|
const VERSION = 'weerscherm-v3';
|
|
const SHELL = [
|
|
'./',
|
|
'./index.html',
|
|
'./styles.css',
|
|
'./app.js',
|
|
'./format.js',
|
|
'./icons.js',
|
|
'./manifest.webmanifest',
|
|
'./icons/icon.svg',
|
|
'./icons/icon-180.png',
|
|
'./icons/icon-192.png',
|
|
'./icons/icon-512.png',
|
|
];
|
|
const API_PATH = '/api/data.php';
|
|
const API_TIMEOUT_MS = 8000;
|
|
|
|
self.addEventListener('install', (event) => {
|
|
event.waitUntil(
|
|
caches.open(VERSION).then((cache) => cache.addAll(SHELL)).then(() => self.skipWaiting()),
|
|
);
|
|
});
|
|
|
|
self.addEventListener('activate', (event) => {
|
|
event.waitUntil(
|
|
caches.keys()
|
|
.then((keys) => Promise.all(keys.filter((k) => k !== VERSION).map((k) => caches.delete(k))))
|
|
.then(() => self.clients.claim()),
|
|
);
|
|
});
|
|
|
|
self.addEventListener('fetch', (event) => {
|
|
const req = event.request;
|
|
if (req.method !== 'GET') return;
|
|
const url = new URL(req.url);
|
|
if (url.origin !== self.location.origin) return;
|
|
|
|
if (url.pathname.endsWith(API_PATH)) {
|
|
event.respondWith(networkFirst(req));
|
|
} else {
|
|
event.respondWith(cacheFirst(req));
|
|
}
|
|
});
|
|
|
|
async function networkFirst(req) {
|
|
const cache = await caches.open(VERSION);
|
|
const controller = new AbortController();
|
|
const timer = setTimeout(() => controller.abort(), API_TIMEOUT_MS);
|
|
try {
|
|
const res = await fetch(req, { signal: controller.signal, cache: 'no-store' });
|
|
if (res.ok) {
|
|
cache.put(req, res.clone());
|
|
}
|
|
return res;
|
|
} catch (err) {
|
|
const cached = await cache.match(req);
|
|
if (cached) {
|
|
const headers = new Headers(cached.headers);
|
|
headers.set('X-From-Cache', '1');
|
|
return new Response(await cached.arrayBuffer(), { status: 200, statusText: 'OK', headers });
|
|
}
|
|
return new Response(JSON.stringify({ errors: ['offline'] }), {
|
|
status: 503,
|
|
headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' },
|
|
});
|
|
} finally {
|
|
clearTimeout(timer);
|
|
}
|
|
}
|
|
|
|
async function cacheFirst(req) {
|
|
const cache = await caches.open(VERSION);
|
|
const cached = await cache.match(req, { ignoreSearch: true });
|
|
if (cached) return cached;
|
|
const res = await fetch(req);
|
|
if (res.ok) {
|
|
cache.put(req, res.clone());
|
|
}
|
|
return res;
|
|
}
|