From 271684ce85879579c2c25f4f7c95aa71b29f7a57 Mon Sep 17 00:00:00 2001
From: cursor <cursor@users.noreply.gitea.schwenk.online>
Date: Sun, 5 Jul 2026 15:14:45 +0000
Subject: [PATCH] fix(scoring): PWA installierbar + Mikrofon auf Android/Chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web-App-Manifest, Service Worker und Icons für Install-Prompt;
Permissions-Policy erlaubt Mikrofon (self); getUserMedia vor Speech API.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 nginx/default.conf                  |   7 ++-
 nginx/security-headers.conf         |   2 +-
 public/scoring/icons/icon-192.png   | Bin 0 -> 506 bytes
 public/scoring/icons/icon-512.png   | Bin 0 -> 1908 bytes
 public/scoring/index.html           |  89 ++++++++++++++++++++++++----
 public/scoring/manifest.webmanifest |  32 ++++++++++
 public/scoring/sw.js                |  29 +++++++++
 7 files changed, 146 insertions(+), 13 deletions(-)
 create mode 100644 public/scoring/icons/icon-192.png
 create mode 100644 public/scoring/icons/icon-512.png
 create mode 100644 public/scoring/manifest.webmanifest
 create mode 100644 public/scoring/sw.js

diff --git a/nginx/default.conf b/nginx/default.conf
index b8f6bf8..1304271 100644
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -12,7 +12,12 @@ server {
     gzip_vary on;
     gzip_proxied any;
     gzip_comp_level 6;
-    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
+    gzip_types text/plain text/css text/xml application/json application/javascript application/manifest+json application/xml+rss application/atom+xml image/svg+xml;
+
+    location ~* \.webmanifest$ {
+        default_type application/manifest+json;
+        add_header Cache-Control "public, max-age=86400";
+    }
 
     location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|webp)$ {
         expires 1y;
diff --git a/nginx/security-headers.conf b/nginx/security-headers.conf
index 9a74c49..83043de 100644
--- a/nginx/security-headers.conf
+++ b/nginx/security-headers.conf
@@ -4,5 +4,5 @@ add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" alway
 add_header X-Frame-Options "SAMEORIGIN" always;
 add_header X-Content-Type-Options "nosniff" always;
 add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
+add_header Permissions-Policy "geolocation=(), microphone=(self), camera=()" always;
 add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; base-uri 'self'; form-action 'self'; object-src 'none'" always;
diff --git a/public/scoring/icons/icon-192.png b/public/scoring/icons/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a7f1329554544644bea45555dbe22d3817edf56
GIT binary patch
literal 506
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE2}s`E_d9@rf$^ZHi(^Q|t+$spavo3+ad3Rj
zv82qp++%*NjHlqG<!AWh6`R=en~pENv`R!TQlWum0)vo)kOPwk1E&I~0;39004Q`R
zsG-l;`yo&YO#&nU7GhKZtHq`nNlgRDJPb8k1Q*!ND`nzPXkZwu#DcrP@BsP{)%`F}
zPl5!DC&_9+foIRK>s>e(J1AIyA&G9rth?;LPj)S7EiwHCj8g_rS3j3^P6<r_*FtBW

literal 0
HcmV?d00001

diff --git a/public/scoring/icons/icon-512.png b/public/scoring/icons/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..518223835409f984caa765e3654666375949bebd
GIT binary patch
literal 1908
zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&t&wwUqN(1_pL(PZ!6Kid%25Zsa_mAkY^0
zoMTDZ?l%+cep^fu+OWNZGkIe52eluT@4Ulx8Ca(HFeorEaDdEcU?7W0iuMgg4990O
za(FN>urM$%GB_|W2$095RQmxI@;wX*C$hr}sy%^~q5uGf8@b_^(EhEgtf+{Cfk^=v
z;T#RXh*toH22%qt8K4P*<bXmTl|VU=I-p7vK_Cw#M<RvYHY6wDunpk^1%`Q>$g=st
zD**-;2Vl|@U|?imbYNfsLPh}~4<_iq;6upMU}uo*X|M*2AV%^uFd(r7F`6J*0S+`{
zhZUMf(S0w#pp728XjVhg0f})94JT?uIXOYD07@mGB#S$ZM=$~t05BbZ(gZM7fD#8V
zs6eTLoMMI?JxHY>h1w}77of#4xy1^+G$+4Q2L}U8dxJgugE}?_MowVd0V5As$N&o>
ea+t*Hk)OFx_|JwvE=~yyK;Y@>=d#Wzp$P!Vd7pIv

literal 0
HcmV?d00001

diff --git a/public/scoring/index.html b/public/scoring/index.html
index 0975396..6959004 100644
--- a/public/scoring/index.html
+++ b/public/scoring/index.html
@@ -2,7 +2,16 @@
 <html lang="de">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#0f1117">
+  <meta name="description" content="Punktestand für zwei Spieler mit Spracheingabe">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Scoring">
+  <link rel="manifest" href="manifest.webmanifest">
+  <link rel="icon" href="icons/icon-192.png" type="image/png">
+  <link rel="apple-touch-icon" href="icons/icon-192.png">
   <title>Scoring — zwei Spieler</title>
   <style>
     :root {
@@ -172,6 +181,16 @@
       border-color: #7f1d1d;
     }
 
+    #install-btn {
+      display: none;
+      border-color: var(--p2-dim);
+      color: var(--p2);
+    }
+
+    #install-btn.visible {
+      display: inline-flex;
+    }
+
     .status-bar {
       min-height: 2.75rem;
       padding: 0.5rem 1.25rem 1rem;
@@ -248,6 +267,7 @@
       <span aria-hidden="true">🎤</span>
       <span id="mic-label">Spracheingabe</span>
     </button>
+    <button type="button" id="install-btn">App installieren</button>
     <button type="button" id="reset-btn">Zurücksetzen</button>
   </div>
 
@@ -256,7 +276,7 @@
   <p class="hint">
     Sprachbefehle (de-DE): <code>eins plus drei</code>, <code>zwei minus eins</code>,
     <code>spieler eins plus fünf</code>, <code>zurücksetzen</code>.
-    Mikrofon-Zugriff nötig; funktioniert in Chrome/Edge/Safari (nicht Firefox).
+    Mikrofon-Zugriff nötig; Chrome/Edge/Safari (nicht Firefox). Als App installierbar unter Android/Chrome.
   </p>
 
   <footer>
@@ -269,6 +289,8 @@
     const statusEl = document.getElementById('status');
     const micBtn = document.getElementById('mic-btn');
     const micLabel = document.getElementById('mic-label');
+    const installBtn = document.getElementById('install-btn');
+    let installPrompt = null;
 
     function getName(player) {
       return document.querySelector(`#player-${player} .player-name`).value.trim()
@@ -387,6 +409,17 @@
       adjust(cmd.player, cmd.delta);
     }
 
+    async function ensureMicPermission() {
+      if (!navigator.mediaDevices?.getUserMedia) return true;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        stream.getTracks().forEach((track) => track.stop());
+        return true;
+      } catch {
+        return false;
+      }
+    }
+
     function initSpeech() {
       if (!SpeechRecognition) {
         micBtn.classList.add('unsupported');
@@ -400,7 +433,7 @@
       recognition.lang = 'de-DE';
       recognition.continuous = false;
       recognition.interimResults = true;
-      recognition.maxAlternatives = 3;
+      recognition.maxAlternatives = 5;
 
       recognition.addEventListener('start', () => {
         listening = true;
@@ -439,21 +472,55 @@
         if (msg) setStatus(msg);
       });
 
-      micBtn.addEventListener('click', () => {
+      micBtn.addEventListener('click', async () => {
         if (listening) {
           recognition.stop();
-        } else {
-          try {
-            recognition.start();
-          } catch {
-            recognition.stop();
-            setTimeout(() => recognition.start(), 200);
-          }
+          return;
+        }
+        const allowed = await ensureMicPermission();
+        if (!allowed) {
+          setStatus('Mikrofon-Zugriff verweigert — in den Browser-Einstellungen erlauben.');
+          return;
+        }
+        try {
+          recognition.start();
+        } catch {
+          recognition.stop();
+          setTimeout(() => {
+            try { recognition.start(); } catch { /* ignore */ }
+          }, 250);
         }
       });
     }
 
+    function initPwa() {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('./sw.js', { scope: './' }).catch(() => {});
+      }
+
+      window.addEventListener('beforeinstallprompt', (event) => {
+        event.preventDefault();
+        installPrompt = event;
+        installBtn.classList.add('visible');
+      });
+
+      installBtn.addEventListener('click', async () => {
+        if (!installPrompt) return;
+        installPrompt.prompt();
+        const { outcome } = await installPrompt.userChoice;
+        installPrompt = null;
+        installBtn.classList.remove('visible');
+        if (outcome === 'accepted') setStatus('App installiert.');
+      });
+
+      window.addEventListener('appinstalled', () => {
+        installBtn.classList.remove('visible');
+        installPrompt = null;
+      });
+    }
+
     initSpeech();
+    initPwa();
   </script>
 </body>
 </html>
diff --git a/public/scoring/manifest.webmanifest b/public/scoring/manifest.webmanifest
new file mode 100644
index 0000000..5d761a2
--- /dev/null
+++ b/public/scoring/manifest.webmanifest
@@ -0,0 +1,32 @@
+{
+  "name": "Scoring — zwei Spieler",
+  "short_name": "Scoring",
+  "description": "Punktestand für zwei Spieler mit Spracheingabe",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "theme_color": "#0f1117",
+  "background_color": "#0f1117",
+  "lang": "de",
+  "icons": [
+    {
+      "src": "icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/public/scoring/sw.js b/public/scoring/sw.js
new file mode 100644
index 0000000..f39ecfd
--- /dev/null
+++ b/public/scoring/sw.js
@@ -0,0 +1,29 @@
+const CACHE = 'scoring-v1';
+const ASSETS = [
+  './',
+  './index.html',
+  './manifest.webmanifest',
+  './icons/icon-192.png',
+  './icons/icon-512.png'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(ASSETS)).then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET') return;
+  event.respondWith(
+    caches.match(event.request).then((cached) => cached || fetch(event.request))
+  );
+});