feat(web_companion): PWA-Haertung -- manifest id/scope, sw v2, Tests erweitert

- manifest.webmanifest: id und scope ergaenzt (PWA-Installierbarkeit Best-Practice)
- sw.js: CACHE_NAME v2, clients.claim() in waitUntil-Kette verschoben
- pwa.test.mjs: von 2 auf 15 Tests erweitert (20/20 gruen mit library-Tests)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Lukas Geiger

CHANGELOG.md

@@ -15,6 +15,9 @@ Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.1.0/).
 - `llms.txt` mit maschinenlesbarer Projektpositionierung, Datenschutzgrenzen und relevanten Suchbegriffen.
 - Redigierter Workspace-Export `devcenter-workspace-v1.json` als Desktop-Funktion unter `Datei -> Arbeitsstand exportieren...`.
 - Statischer `web_companion/`-MVP mit lokalem JSON-Import, Demo-Fixture, read-only Dashboard, `manifest.webmanifest`, Service Worker und Node-Tests.
+- `web_companion/manifest.webmanifest`: `id` und `scope` ergänzt (PWA-Installierbarkeits-Best-Practice)
+- `web_companion/sw.js`: CACHE_NAME v2, `clients.claim()` in `waitUntil`-Kette verschoben
+- `web_companion/tests/pwa.test.mjs`: auf 15 PWA-Tests erweitert (20/20 grün mit library-Tests)
 
 ### Geändert / Changed
 - README, Contribution- und Security-Dokumentation auf `dev-bricks/DevCenter` aktualisiert.

web_companion/manifest.webmanifest

@@ -1,4 +1,6 @@
 {
+  "id": "./",
+  "scope": "./",
   "name": "DevCenter Companion",
   "short_name": "DevCenter",
   "description": "Liest redigierte DevCenter-Arbeitsstände lokal und offline im Browser.",

web_companion/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "devcenter-companion-v1";
+const CACHE_NAME = "devcenter-companion-v2";
 const APP_SHELL = [
   "./",
   "./index.html",
@@ -20,15 +20,17 @@ self.addEventListener("install", (event) => {
 
 self.addEventListener("activate", (event) => {
   event.waitUntil(
-    caches.keys().then((keys) =>
-      Promise.all(
-        keys
-          .filter((key) => key !== CACHE_NAME)
-          .map((key) => caches.delete(key)),
-      ),
-    ),
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key !== CACHE_NAME)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .then(() => self.clients.claim()),
   );
-  self.clients.claim();
 });
 
 self.addEventListener("fetch", (event) => {

web_companion/tests/pwa.test.mjs

@@ -5,20 +5,95 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const manifestPath = path.join(__dirname, "..", "manifest.webmanifest");
-const swPath = path.join(__dirname, "..", "sw.js");
-
-test("manifest definiert standalone-PWA mit SVG-Icons", () => {
-  const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
-  assert.equal(manifest.display, "standalone");
-  assert.equal(manifest.start_url, "./index.html");
-  assert.ok(Array.isArray(manifest.icons));
-  assert.ok(manifest.icons.some((icon) => icon.src.endsWith("app.svg")));
-});
-
-test("service worker cached den Demo-Export und die Shell-Dateien", () => {
-  const source = fs.readFileSync(swPath, "utf8");
-  assert.match(source, /demo-workspace\.json/);
-  assert.match(source, /manifest\.webmanifest/);
-  assert.match(source, /cache\.addAll/);
+const root = path.join(__dirname, "..");
+const manifestPath = path.join(root, "manifest.webmanifest");
+const swPath = path.join(root, "sw.js");
+const indexPath = path.join(root, "index.html");
+const appJsPath = path.join(root, "app.js");
+
+// --- Manifest ---
+
+test("manifest: display ist standalone", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.equal(m.display, "standalone");
+});
+
+test("manifest: start_url vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.equal(m.start_url, "./index.html");
+});
+
+test("manifest: id-Feld vorhanden (PWA-Installierbarkeit)", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.ok(typeof m.id === "string" && m.id.length > 0, "id fehlt oder leer");
+});
+
+test("manifest: scope-Feld vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.ok(typeof m.scope === "string" && m.scope.length > 0, "scope fehlt oder leer");
+});
+
+test("manifest: name und short_name vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.ok(m.name && m.short_name);
+});
+
+test("manifest: SVG-Icon mit purpose any vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.ok(Array.isArray(m.icons));
+  assert.ok(m.icons.some((i) => i.src.endsWith("app.svg") && i.purpose === "any"));
+});
+
+test("manifest: maskable Icon vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  assert.ok(m.icons.some((i) => i.purpose === "maskable"));
+});
+
+test("manifest: Icon-SVG-Dateien physisch vorhanden", () => {
+  const m = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  for (const icon of m.icons) {
+    const iconPath = path.join(root, icon.src.replace(/^\.\//, ""));
+    assert.ok(fs.existsSync(iconPath), `Icon fehlt: ${icon.src}`);
+  }
+});
+
+// --- Service Worker ---
+
+test("sw.js: CACHE_NAME enthält 'devcenter'", () => {
+  const src = fs.readFileSync(swPath, "utf8");
+  assert.match(src, /devcenter/);
+});
+
+test("sw.js: CACHE_NAME ist v2 (aktuell)", () => {
+  const src = fs.readFileSync(swPath, "utf8");
+  assert.match(src, /devcenter-companion-v2/);
+});
+
+test("sw.js: skipWaiting() im install-Handler", () => {
+  const src = fs.readFileSync(swPath, "utf8");
+  assert.match(src, /self\.skipWaiting\(\)/);
+});
+
+test("sw.js: clients.claim() im activate-Handler", () => {
+  const src = fs.readFileSync(swPath, "utf8");
+  assert.match(src, /self\.clients\.claim\(\)/);
+});
+
+test("sw.js: Demo-Export und Shell-Dateien gecacht", () => {
+  const src = fs.readFileSync(swPath, "utf8");
+  assert.match(src, /demo-workspace\.json/);
+  assert.match(src, /manifest\.webmanifest/);
+  assert.match(src, /cache\.addAll/);
+});
+
+// --- HTML-Integration ---
+
+test("index.html: verweist auf manifest.webmanifest", () => {
+  const html = fs.readFileSync(indexPath, "utf8");
+  assert.match(html, /manifest\.webmanifest/);
+});
+
+test("app.js: registriert Service Worker", () => {
+  const src = fs.readFileSync(appJsPath, "utf8");
+  assert.match(src, /serviceWorker\.register/);
 });