Progessive Web Apps mit React und Leaflet: 5 Learnings für lokale Karten

Der Boom lokaler Kartenanwendungen in Südkorea zeigt: Progressive Web Apps (PWAs) bieten entscheidende Vorteile gegenüber klassischen Web-Apps. Ein kürzlich veröffentlichtes Projekt, das 31 Städte in der Region Gyeonggi-do abdeckt, liefert wertvolle Einblicke in die praktische Umsetzung. Diese Anwendung kombiniert React mit der Open-Source-Bibliothek Leaflet und demonstriert, wie sich Performance, Kosten und Nutzererlebnis optimieren lassen. Besonders in Märkten wie Südkorea, wo Naver eine dominante Rolle als Suchmaschine spielt, erweisen sich PWAs als entscheidender Faktor für die lokale Sichtbarkeit.

Warum Vite SSG die bessere Wahl als klassische SPAs ist

Das Team hinter der Gyeonggi-Currency-Map setzte auf Vite Static Site Generation (SSG) statt auf eine reine Single-Page-Application (SPA). Der Grund liegt in der Crawling-Logik südkoreanischer Suchmaschinen. Während Google moderne JavaScript-Rendering-Techniken zunehmend unterstützt, verarbeitet Naver viele Inhalte nur unvollständig, wenn diese dynamisch nachgeladen werden.

Durch den Einsatz von Vite SSG werden alle Inhalte bereits bei Build-Zeit generiert und als statische HTML-Dateien ausgeliefert. Das beschleunigt nicht nur die Ladezeiten, sondern stellt sicher, dass Naver die vollständige Seitenstruktur crawlen und indexieren kann. Für lokale Unternehmen und Projekte in Südkorea bedeutet dies einen deutlichen SEO-Vorteil gegenüber herkömmlichen SPAs, bei denen der Crawler nur eine leere Seite vorfindet.

Kostenfalle Mapbox vermeiden: OpenStreetMap als Alternative

Ein weiteres zentrales Learning betrifft die Wahl der Kartentechnologie. Viele Entwickler greifen aus Bequemlichkeit auf Mapbox zurück, doch die Kosten können schnell explodieren – besonders bei Projekten mit vielen Nutzern oder hohen Zoomstufen. Die OpenStreetMap (OSM)-Datenbank bietet hier eine attraktive Alternative:

• Kostenlos: OSM wird von einer globalen Community gepflegt und stellt kostenlose Basiskarten zur Verfügung.
• Anpassbar: Durch Plugins wie Leaflet lassen sich individuelle Stile und Overlays einfach integrieren.
• Lokal relevant: OSM-Daten enthalten oft detailliertere Informationen zu kleineren Städten und Regionen in Südkorea als kommerzielle Anbieter.

Für das Gyeonggi-Projekt bedeutete dies eine Einsparung von mehreren tausend US-Dollar pro Jahr, ohne Kompromisse bei der Nutzererfahrung einzugehen.

Firebase Hosting: Tiefe URLs ohne Backend-Entwicklung

Ein häufiges Hindernis beim Aufbau lokaler Kartenanwendungen sind statische URLs wie /stadt/suwon, die ohne dynamische Backend-Logik schwer umsetzbar sind. Das Team löste dieses Problem elegant mit Firebase Hosting und dessen Rewrite-Funktionen.

Durch eine einfache Konfiguration in der firebase.json-Datei lassen sich Routen umleiten, ohne dass ein eigener Server oder Cloud-Funktionen benötigt werden:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "/stadt/{city}",
        "destination": "/index.html"
      }
    ]
  }
}

Diese Lösung ermöglicht es, nutzerfreundliche URLs beizubehalten, während die Anwendung weiterhin als statische Seite ausgeliefert wird. Für Entwickler bedeutet dies weniger Aufwand und schnellere Iterationen.

KakaoTalk-Sharing: Der Schlüssel zur sozialen Reichweite

In Südkorea ist KakaoTalk mit über 50 Millionen Nutzern die dominierende Messaging-App. Für lokale Anwendungen ist die Integration von KakaoTalk-Sharing daher kein optionaler Luxus, sondern eine Grundvoraussetzung.

Das Gyeonggi-Projekt integrierte die KakaoTalk-API, um Nutzern das einfache Teilen von Kartenausschnitten oder Standortdaten zu ermöglichen. Die Ergebnisse waren beeindruckend:

• Über 70 % des sozialen Traffics stammte aus KakaoTalk-Empfehlungen.
• Die Verweildauer auf der Seite stieg deutlich an, da Nutzer Inhalte direkt in ihren Chats teilten.
• Die virale Verbreitung führte zu einer organischen Wachstumsrate von 30 % innerhalb der ersten vier Wochen.

Ohne diese Integration hätte das Projekt kaum eine vergleichbare Reichweite erzielen können.

PWAs installieren: Warum manuelle Nutzerführung besser ist

Progressive Web Apps bieten die Möglichkeit, Nutzern direkt eine Installationsaufforderung anzuzeigen. Doch das Team entschied sich bewusst gegen automatische Pop-ups. Stattdessen setzten sie auf eine subtile Nutzerführung:

• Ein kleines, unaufdringliches Banner am unteren Bildrand informierte Nutzer über die PWA-Funktionalität.
• Erst nach mehreren Besuchen oder bei bestimmten Interaktionen (z. B. dem Öffnen der Menüleiste) wurde ein klarer Call-to-Action eingeblendet.
• Die Akzeptanzrate für die Installation lag bei über 40 %, da Nutzer selbst entscheiden konnten, wann sie die App installieren möchten.

Diese Herangehensweise führte zu einer höheren Nutzerzufriedenheit und vermied das Risiko, Besucher durch aufdringliche Pop-ups zu vergraulen.

Fazit: PWAs als strategischer Vorteil für lokale Projekte

Die Erfahrungen aus dem Gyeonggi-Currency-Map-Projekt zeigen, dass Progressive Web Apps in lokalen Märkten wie Südkorea klare Vorteile bieten – von besseren SEO-Ergebnissen bis hin zu kostengünstigen Implementierungen. Die Kombination aus Vite SSG, Leaflet und Firebase Hosting ermöglicht es Entwicklern, leistungsstarke Anwendungen ohne hohen technischen Overhead zu erstellen. Gleichzeitig unterstreicht die Integration von KakaoTalk, wie wichtig lokale Ökosysteme für die Reichweite sind. Wer diese Faktoren berücksichtigt, kann PWAs nicht nur als technische Lösung, sondern als strategischen Baustein für lokale Sichtbarkeit und Nutzerbindung nutzen.