Sehr gute Idee 🚀 – eine Web-App als PWA ist in deinem Fall sogar ziemlich attraktiv, weil du: Nur eine Codebasis pflegst (Web + Android + iOS). Per PWA-Install fast wie eine native App wirkst. Picture-in-Picture (PiP) für Video/Maps auf Android nutzen kannst (iOS eingeschränkter, aber Safari unterstützt gewisse PiP-Features). Google Maps & Waze über Deep Links oder eingebettete Web-Version öffnen kannst. 👉 Einschränkungen: iOS-PWAs dürfen nicht alles (kein vollständiger PiP-Support, Hintergrund-TTS eingeschränkt). Zugriff auf Mikrofon (für Sprachbefehle) und TTS geht, aber Safari ist hakelig. Navigation wird nicht direkt eingebettet, sondern eher als PiP-Overlay (Maps in kleinem Fenster, Quiz im Hauptfenster). ⚡️ MVP-Skizzierung: Quiz-Navi-PWA Hier ein Vorschlag für die Screens und Flow:
- Startscreen App-Logo + Titel „QuizNavi“ Auswahl: 👤 Fahrer (Audio-Modus) 👥 Mitfahrer (Touch + Audio) Dropdown: „Bevorzugte Navi-App“ (Google Maps, Waze, Here) Button: „Starten“
- Quiz-Screen (Hauptfenster) Oben: PiP-Navi-Fenster (zeigt Google Maps oder Waze Route) Darunter: Frage (z. B. „Wie viele Planeten hat unser Sonnensystem?“) Timer-Animation (Tick-Tack-Sound im Audio-Modus) Fahrer-Modus: Frage wird vorgelesen, Fahrer antwortet per Sprache. Mitfahrer-Modus: 4 Antwortbuttons + Score-Anzeige.
- Antwort-Phase Nach Timer: Richtige Antwort wird vorgelesen. Fahrer-Modus: „Lagst du richtig? (Sag Ja oder Nein)“ Mitfahrer-Modus: Antwort wird farblich markiert, Punkte vergeben.
- Flow mit Navigation Wenn Navi meldet: „Abbiegen in 300m“ → Quiz pausiert automatisch. Quiz fährt erst weiter, wenn die Strecke wieder geradeaus geht. Falls Nutzer PiP beendet → Quiz läuft allein weiter.
- Einstellungen Sprache (Deutsch/Englisch etc.) Quiz-Kategorien (Allgemeinwissen, Auto & Verkehr, Musik …) Schwierigkeitsgrad TTS-Stimme & Geschwindigkeit 🛠️ Technische Umsetzung (PWA) Frontend: React (oder Vue/Svelte, aber React hat die besten Libs) UI: Tailwind CSS + kleine Animationslib (Framer Motion) Audio: SpeechSynthesis API (TTS im Browser) Web Speech API für Spracherkennung (Chrome/Edge stabil, Safari eingeschränkt) Navigation: Deep Links (https://www.google.com/maps/dir/... oder waze://) PiP über ein eingebettetes <iframe> (Google Maps Embed API, eingeschränkt steuerbar) Hosting: Netlify/Vercel → PWA-ready 🎯 Zeitaufwand (für MVP) Basis-PWA mit Audio-Quiz, Mitfahrer-Modus, Maps im Embed/PiP: 6–8 Wochen (1 Dev) Erweitert (Spracherkennung robust, Auto-Pause bei Navi-Ansagen, Offline-Quiz-Packs): +3–4 Monate 👉 Soll ich dir dazu ein visuelles Wireframe (Skizze der App-Screens) erstellen, damit du gleich eine Vorstellung vom Look & Flow hast?