feat: installable offline PWA (manifest + service worker)

2026-07-20 14:21:56 +01:00
parent 1348048d50
commit 539798f8d0
5 changed files with 70 additions and 0 deletions
@@ -5,6 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>The Director</title>
    <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <meta name="theme-color" content="#0b0e13" />
  </head>
  <body>
    <gm-shell></gm-shell>
@@ -0,0 +1,14 @@
+{
+  "name": "The Director",
+  "short_name": "Director",
+  "description": "Offline convention GM shell",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "landscape",
+  "background_color": "#0b0e13",
+  "theme_color": "#0b0e13",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
@@ -0,0 +1,22 @@
+const CACHE = 'director-v1';
+const SHELL = ['/', '/index.html', '/src/main.js', '/src/styles.css'];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
+});
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+self.addEventListener('fetch', (e) => {
+  if (e.request.method !== 'GET') return;
+  e.respondWith(
+    caches.match(e.request).then((hit) => hit || fetch(e.request).then((res) => {
+      const copy = res.clone();
+      caches.open(CACHE).then((c) => c.put(e.request, copy));
+      return res;
+    }).catch(() => caches.match('/index.html')))
+  );
+});
@@ -10,3 +10,9 @@ if (typeof document !== 'undefined' && document.querySelector('gm-shell')) {
    shell.loadScenario(afterimage);
  });
 }
+
+if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch(() => {});
+  });
+}
@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+
+describe('PWA wiring', () => {
+  it('links the manifest in index.html', () => {
+    const html = readFileSync('index.html', 'utf8');
+    expect(html).toContain('rel="manifest"');
+    expect(html).toContain('manifest.webmanifest');
+  });
+  it('manifest declares an installable app', () => {
+    const m = JSON.parse(readFileSync('public/manifest.webmanifest', 'utf8'));
+    expect(m.name).toBeTruthy();
+    expect(m.display).toBe('standalone');
+    expect(Array.isArray(m.icons)).toBe(true);
+  });
+  it('main.js registers the service worker', () => {
+    const js = readFileSync('src/main.js', 'utf8');
+    expect(js).toContain('serviceWorker');
+    expect(js).toContain("register('/sw.js')");
+  });
+  it('service worker precaches the shell', () => {
+    const sw = readFileSync('public/sw.js', 'utf8');
+    expect(sw).toContain('addEventListener');
+    expect(sw).toContain('caches');
+  });
+});