scoring #4

Closed
opened 2026-07-05 17:05:56 +02:00 by froxxxy · 6 comments
Owner

erstelle eine kleine scoring app (html js) für zwei spieler mit Spracheingabe (https://whatpwacando.today/speech-recognition)

erstelle eine kleine scoring app (html js) für zwei spieler mit Spracheingabe (https://whatpwacando.today/speech-recognition)
Author
Owner

@cursor s.o.

@cursor s.o.
Collaborator

Erledigt — Scoring-App ist live nach Webhook-Deploy.

URL: https://playground.schwenk.online/scoring/

Features:

  • Zwei Spieler mit editierbaren Namen und großen Punkteständen
  • Tippen: ±1 / +2 / +3 pro Spieler
  • Spracheingabe (Web Speech API, de-DE): z. B. eins plus drei, zwei minus eins, zurücksetzen
  • Mikrofon-Button startet/stoppt die Erkennung

Hinweis: Spracherkennung braucht Chrome, Edge oder Safari + Mikrofon-Freigabe. Firefox unterstützt die API nicht.

Commit: 93850eb auf main.

Erledigt — Scoring-App ist live nach Webhook-Deploy. **URL:** https://playground.schwenk.online/scoring/ **Features:** - Zwei Spieler mit editierbaren Namen und großen Punkteständen - Tippen: ±1 / +2 / +3 pro Spieler - Spracheingabe (Web Speech API, `de-DE`): z. B. `eins plus drei`, `zwei minus eins`, `zurücksetzen` - Mikrofon-Button startet/stoppt die Erkennung **Hinweis:** Spracherkennung braucht Chrome, Edge oder Safari + Mikrofon-Freigabe. Firefox unterstützt die API nicht. Commit: `93850eb` auf `main`.
Author
Owner

@cursor funktioniert auf chrome / android nicht, lässt sich auch nicht installieren, evtl. keine richtige pwa? wenn nicht möglich dann hier schreiben

@cursor funktioniert auf chrome / android nicht, lässt sich auch nicht installieren, evtl. keine richtige pwa? wenn nicht möglich dann hier schreiben
Collaborator

Gefixt — zwei Ursachen:

1. Keine echte PWA (Installieren ging nicht)

Es fehlten Manifest, Service Worker und Icons. Jetzt dabei:

  • manifest.webmanifest + sw.js + Icons 192/512
  • Button „App installieren“ erscheint in Chrome/Android, sobald die Kriterien erfüllt sind
  • Alternativ: Chrome-Menü → „Zum Startbildschirm hinzufügen“ / „App installieren“

2. Mikrofon blockiert (Spracheingabe auf Android)

In nginx/security-headers.conf stand microphone=() — das hat die Web-Speech-API serverseitig gesperrt. Geändert auf microphone=(self).

Zusätzlich: vor dem Start der Spracherkennung wird jetzt getUserMedia angefragt (hilft auf Android bei der Berechtigung).


URL: https://playground.schwenk.online/scoring/

Nach Deploy testen (Android/Chrome):

  1. Seite neu laden (ggf. Cache leeren)
  2. Mikrofon erlauben → Spracheingabe-Button tippen
  3. Installieren über den neuen Button oder Chrome-Menü

Hinweis nginx: Die Header-Änderung greift erst nach Reload des nginx-Containers auf boka (docker compose restart playground o.ä.). Die PWA-Dateien unter public/ sind nach Webhook-git pull sofort da.

Commit: 271684c auf main.

Gefixt — zwei Ursachen: ### 1. Keine echte PWA (Installieren ging nicht) Es fehlten Manifest, Service Worker und Icons. Jetzt dabei: - `manifest.webmanifest` + `sw.js` + Icons 192/512 - Button **„App installieren“** erscheint in Chrome/Android, sobald die Kriterien erfüllt sind - Alternativ: Chrome-Menü → **„Zum Startbildschirm hinzufügen“** / **„App installieren“** ### 2. Mikrofon blockiert (Spracheingabe auf Android) In `nginx/security-headers.conf` stand `microphone=()` — das hat die Web-Speech-API serverseitig gesperrt. Geändert auf `microphone=(self)`. Zusätzlich: vor dem Start der Spracherkennung wird jetzt `getUserMedia` angefragt (hilft auf Android bei der Berechtigung). --- **URL:** https://playground.schwenk.online/scoring/ **Nach Deploy testen (Android/Chrome):** 1. Seite neu laden (ggf. Cache leeren) 2. Mikrofon erlauben → Spracheingabe-Button tippen 3. Installieren über den neuen Button oder Chrome-Menü **Hinweis nginx:** Die Header-Änderung greift erst nach Reload des nginx-Containers auf boka (`docker compose restart playground` o.ä.). Die PWA-Dateien unter `public/` sind nach Webhook-`git pull` sofort da. Commit: `271684c` auf `main`.
Author
Owner

@cursor aber Spracheingabe funktioniert nicht. Berechtigungen abfragen?

@cursor aber Spracheingabe funktioniert nicht. Berechtigungen abfragen?
Collaborator

Gefixt — explizite Berechtigungsabfrage + Android-Bug.

Ursache

Auf Android/Chrome ging getUserMedia und recognition.start() im selben Klick-Handler. Nach await getUserMedia ist die User-Gesture weg — recognition.start() startet dann still nicht.

Änderung

  • Neuer Banner „Mikrofon erlauben“ (sichtbar, solange keine Freigabe)
  • Erst Berechtigung holen → dann Spracheingabe-Button aktivieren
  • recognition.start() läuft ohne vorheriges await im selben Handler
  • Bei Verweigerung: Hinweis zu Chrome-Website-Einstellungen (Schloss → Mikrofon)
  • Nach Rückkehr aus Einstellungen: Status wird neu geprüft

Testen

  1. https://playground.schwenk.online/scoring/ neu laden (Cache leeren falls nötig)
  2. Mikrofon erlauben tippen → Browser-Dialog bestätigen
  3. Spracheingabe tippen → z. B. eins plus drei sagen

Commit: d947e4d auf main (Webhook-Deploy).

Gefixt — explizite Berechtigungsabfrage + Android-Bug. ### Ursache Auf Android/Chrome ging `getUserMedia` und `recognition.start()` im **selben** Klick-Handler. Nach `await getUserMedia` ist die User-Gesture weg — `recognition.start()` startet dann still nicht. ### Änderung - Neuer Banner **„Mikrofon erlauben“** (sichtbar, solange keine Freigabe) - Erst Berechtigung holen → dann Spracheingabe-Button aktivieren - `recognition.start()` läuft **ohne** vorheriges `await` im selben Handler - Bei Verweigerung: Hinweis zu Chrome-Website-Einstellungen (Schloss → Mikrofon) - Nach Rückkehr aus Einstellungen: Status wird neu geprüft ### Testen 1. https://playground.schwenk.online/scoring/ neu laden (Cache leeren falls nötig) 2. **Mikrofon erlauben** tippen → Browser-Dialog bestätigen 3. **Spracheingabe** tippen → z. B. `eins plus drei` sagen Commit: `d947e4d` auf `main` (Webhook-Deploy).
Sign in to join this conversation.
No Label
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: froxxxy/playground#4