theoandClaude Opus 5
c542601d4e
Het regenblok linksonder opent een overlay met de geanimeerde regenradar van Buienradar (550x512, tijd in het beeld), naast de regencijfers die we al hebben: vandaag, de 3 vorige dagen en het maandtotaal. Sluit na 20 seconden of bij een tik, net als het uuroverzicht. Het beeld loopt via onze eigen /api/radar.php in plaats van een <img> rechtstreeks naar Buienradar: de spec wil alles lokaal geserveerd, de iPad praat zo nooit met een derde partij, we cachen 4 minuten (de radar ververst elke 5) en de servicewerker kan het laatste beeld offline bewaren. Bij een storing komt het laatst opgehaalde beeld terug; pas als er niets is, een nette melding in plaats van een leeg vlak. Bronvermelding staat in de overlay, zoals Buienradar vraagt. Verder: de overlay-machinerie (20s-timer, balk, sluiten) staat nu een keer in plaats van per overlay, Http kan optioneel redirects volgen (de beeld-API leidt door naar een CDN), en alle /api/-paden zijn in de servicewerker network-first met een cachesleutel zonder querystring. Servicewerker naar v7. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
/* Service worker: app-shell cache-first, API network-first met timeout en fallback op de laatste response. */
|
|
|
|
const VERSION = 'weerscherm-v7';
|
|
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_PREFIX = '/api/';
|
|
const DATA_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.includes(API_PREFIX)) {
|
|
event.respondWith(networkFirst(req));
|
|
} else {
|
|
event.respondWith(cacheFirst(req));
|
|
}
|
|
});
|
|
|
|
async function networkFirst(req) {
|
|
const cache = await caches.open(VERSION);
|
|
const url = new URL(req.url);
|
|
// Sleutel zonder querystring: het radarbeeld krijgt elke paar minuten een andere ?t=, en zonder
|
|
// normaliseren zou de cache vollopen met varianten en zou offline nooit een treffer geven.
|
|
const key = url.origin + url.pathname;
|
|
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(key, res.clone());
|
|
}
|
|
return res;
|
|
} catch (err) {
|
|
const cached = await cache.match(key);
|
|
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 });
|
|
}
|
|
if (url.pathname.endsWith(DATA_PATH)) {
|
|
return new Response(JSON.stringify({ errors: ['offline'] }), {
|
|
status: 503,
|
|
headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' },
|
|
});
|
|
}
|
|
return new Response('offline', { status: 503, headers: { '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;
|
|
}
|