ÖPNV Navi – Frontend

Vanilla-JS-Webapp für Live-Abfahrten, Routenplanung und eine Live-Karte im VBB-Verbund (Berlin/Brandenburg) mit Anbindung an echte DB-Bahnhöfe. Kein Build-Schritt, kein Framework – reines HTML/CSS/JS, läuft direkt als statische Website.

Tech-Stack

• Reines HTML5, CSS3, ES2020+ JavaScript (keine Frameworks, kein Bundler)
• Leaflet für die Live-Karte (per CDN eingebunden)
• Google Fonts: IBM Plex Mono / Sans / Sans Condensed
• Service Worker für Web-Push-Benachrichtigungen

Ordnerstruktur

frontend/
├── index.html          Einzige HTML-Seite (Single Page App über Tabs)
├── styles.css           Komplettes Stylesheet ("Solari-Anzeigetafel bei Nacht"-Theme)
├── sw.js                 Service Worker (Web-Push) - MUSS im Root liegen, nicht unter js/
├── manifest.json         PWA-Manifest
└── js/
    ├── config.js         Zentrale Konfiguration (API_BASE-URL des Backends)
    ├── api.js            Schlanker fetch()-Wrapper für alle Backend-Endpunkte
    ├── i18n.js           Mehrsprachigkeit (DE/EN), Wörterbuch + Sprachumschaltung
    ├── app.js            Hauptlogik: Tabs, Suche, Abfahrtstafel, Favoriten, Routenplaner
    ├── splitflap.js       Flip-Animation der Abfahrtstafel (+ Screenreader-Textalternative)
    ├── modefilter.js      Wiederverwendbare Verkehrsmittel-Filter-Chips
    ├── livemap.js         Live-Karte (Leaflet): Radar-Modus, Trip-Tracking, Isolations-Modus
    ├── tripmodal.js       Fahrt-Detail-Modal (Zwischenhalte, Mini-Karte, Verspätungsstatistik)
    ├── tripalarm.js       Fahrtalarm ("wecke mich X Stationen vorher")
    └── push.js            Web-Push: Service-Worker-Registrierung, Abo-Verwaltung

Einrichtung / Deployment

Keine Installation nötig – es sind statische Dateien. Einfach den kompletten Ordnerinhalt auf einen Webserver (nginx, Apache, Vercel, o.ä.) legen.

Wichtig:

• sw.js muss im Root des ausgelieferten Verzeichnisses liegen (dort, wo auch index.html liegt), nicht unter js/. Der Geltungsbereich eines Service Workers ist standardmäßig auf sein eigenes Verzeichnis und alles darunter beschränkt.
• Web Push (und Service Worker generell) funktionieren nur über HTTPS (oder localhost während der Entwicklung).
• In js/config.js die Backend-URL eintragen:

  window.APP_CONFIG = {
    API_BASE: 'https://dein-server.example/live_navi',
  };
  

Features im Überblick

• Abfahrten: Live-Abfahrtstafel (VBB + echte DB-Bahnhöfe), Verkehrsmittel-Filter, Gleiswechsel-Hinweis, Störungen & Aufzugsstatus direkt unter der Tafel
• Route: Routenplanung über HAFAS (VBB + Deutsche Bahn, dieselbe Anbindung wie die iOS-App), bis zu 3 Zwischenhalte, Verkehrsmittel-Filter, Fahrrad-Option, rollstuhlgerechte Verbindungen, Früher/Später-Nachladen, Route teilen (Link)
• Karte: Live-Fahrzeugpositionen, Fahrt isolieren/verfolgen, display-breite Darstellung auf jeder Bildschirmgröße
• Favoriten: eigener Tab, Live-Vorschau der nächsten Abfahrt, Störungs-Badges
• Fahrtalarm: weckt X Stationen vor dem Ziel (Ton, Vibration, Vollbild-Overlay)
• Push-Benachrichtigungen: funktionieren auch bei geschlossenem Tab/Browser (Service Worker + Web Push, siehe js/push.js)
• Verlauf: zuletzt gesuchte Haltestellen, direkt als Vorschläge im Suchfeld
• Mehrsprachigkeit: Deutsch/Englisch, automatische Browsersprache-Erkennung
• Barrierefreiheit: Tastaturbedienung überall (inkl. Suche), ARIA-Tab-Pattern, Fokus-Fallen in Dialogen, Screenreader-Textalternative zur Flip-Animation, aria-live-Regionen für Störungen/Ergebnisse

Browser-Unterstützung

Moderne Evergreen-Browser (Chrome, Firefox, Safari, Edge). Nutzt u. a. fetch, IntersectionObserver-freies Vanilla-DOM, Service Worker, Push API, CSS Custom Properties und dvh-Einheiten (mit vh-Fallback). Kein IE11-Support.

Bekannte Grenzen

• Die Live-Karte ist für blinde Nutzer naturgemäß eingeschränkt zugänglich (Leaflet-Karten sind visuell) – Abfahrtstafel und Routenplaner liefern dieselben Informationen barrierefrei.
• Störungstexte kommen direkt von VBB/HAFAS auf Deutsch – eine Übersetzung ins Englische findet nicht statt (nur die App-Oberfläche selbst ist zweisprachig).
• Fahrtalarm-Ton und Vollbild-Overlay funktionieren nur bei offenem Tab; bei geschlossenem Browser zeigt ein Push nur die Systembenachrichtigung.