Ö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 eine selbst gehostete OTP2-Instanz, konfigurierbarer Umstiegszeit-Puffer, rollstuhlgerechte Verbindungen, 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.

4.3 KiB Raw Blame History Unescape Escape