feat: PWA manifest, app icons, service worker with tests

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/app.js

@@ -216,6 +216,19 @@ async function requestWakeLock() {
   }
 }
 
+/* ---------- service worker ---------- */
+
+function registerServiceWorker() {
+  if (!('serviceWorker' in navigator)) return;
+  navigator.serviceWorker.register('./sw.js').catch((err) => console.warn('weerscherm: service worker', err));
+  let reloading = false;
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (reloading) return;
+    reloading = true;
+    location.reload();
+  });
+}
+
 /* ---------- start ---------- */
 
 window.addEventListener('resize', fit);
@@ -225,6 +238,7 @@ document.addEventListener('visibilitychange', () => {
     fit();
     refresh();
     requestWakeLock();
+registerServiceWorker();
   }
 });
 
@@ -236,3 +250,4 @@ scheduleClock();
 scheduleMidnight();
 scheduleReload();
 requestWakeLock();
+registerServiceWorker();

public/icons/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512" height="512">
+  <rect width="48" height="48" fill="#E8EDF1"/>
+  <g fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="#D39A2C"><circle cx="19" cy="18" r="6"/><path d="M19 6v3M7 18h3M10.5 9.5l2 2M27.5 9.5l-2 2"/></g>
+    <path fill="#E8EDF1" stroke="#1B2A35" d="M17 40h18a7 7 0 0 0 .8-13.96A10 10 0 0 0 17.3 28 6 6 0 0 0 17 40z"/>
+  </g>
+</svg>

public/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "Weerscherm",
+  "short_name": "Weer",
+  "description": "Netatmo-weerstation en verwachting voor in de woonkamer",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "landscape",
+  "background_color": "#E8EDF1",
+  "theme_color": "#E8EDF1",
+  "lang": "nl",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

public/sw.js

@@ -0,0 +1,82 @@
+/* Service worker: app-shell cache-first, API network-first met timeout en fallback op de laatste response. */
+
+const VERSION = 'weerscherm-v1';
+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;
+}