React-Web-App als native App: Was Sie wiederverwenden können

Ausgangslage: Ihre SPA ist bereits fast mobil

Eine mit Vite gebaute React-Anwendung besteht nach dem Build aus statischen Dateien. Es gibt keinen Server-Rendering-Anteil, der in einer App fehlen könnte. Damit stehen alle Wege offen – entscheidend ist, wie viel nativer Funktionsumfang wirklich gebraucht wird und welches Team die App danach pflegt.

Ein typisches Beispiel ist ein Kundenportal im Mittelstand: Es läuft stabil im Browser, Kunden wünschen sich aber eine App mit Benachrichtigungen bei neuen Dokumenten oder Statusänderungen. Hier ist die Frage selten „Native oder nicht?“, sondern „Wie viel Zusatzaufwand ist der Mehrwert wert?“.

Entscheidungsmatrix

Wrapper: der pragmatische Einstieg

Ein nativer Wrapper lädt Ihre produktive SPA und ergänzt Push-Benachrichtigungen, Kamera- und Dateizugriff, Deep Links sowie native Navigation. Da die App auf Ihrer eigenen Domain läuft, funktionieren Session-Cookies und CORS-Einstellungen unverändert. Für Fachabteilungen mit kleinem Frontend-Team ist das oft entscheidend: Es gibt weiterhin nur eine Codebasis und einen Deployment-Prozess.

Auch beim Wrapper sollten Sie einige Punkte vor der Einreichung prüfen:

• Externe Links: Links zu fremden Domains, Zahlungsseiten oder Social Media sollten im Systembrowser öffnen, nicht in der App-Ansicht.
• Downloads: PDF-Rechnungen oder CSV-Exporte, die per Blob-URL erzeugt werden, braucht die native Schicht als echte Datei mit Teilen-Dialog.
• Google-Login: Google erlaubt OAuth nicht in eingebetteten Webviews. Der Login muss im Systembrowser stattfinden und per Deep Link zurückkehren.
• Layout: Notch, Statusleiste und Home-Indikator verlangen viewport-fit=cover und Safe-Area-Abstände im CSS.
• Mehrwert: Ohne Push, native Navigation oder Offline-Verhalten droht eine Ablehnung wegen zu geringer Funktionalität.

Capacitor: lokal gebündelt, mit Nebenwirkungen

Capacitor kopiert den dist-Ordner in ein Xcode- und ein Android-Studio-Projekt. Die App startet schneller, verlangt aber Anpassungen, die in Schätzungen gern fehlen:

• Die App läuft unter capacitor://localhost bzw. https://localhost. Aufrufe an Ihre API sind damit domainübergreifend. Sie brauchen CORS-Freigaben, und Cookie-Sessions werden zu Drittanbieter-Cookies, die WebKit blockiert. Token-Authentifizierung oder die native HTTP-Schicht von Capacitor lösen das.
• Die Zurück-Taste unter Android muss bewusst behandelt werden, sonst schließt sie die App statt eine Seite zurückzugehen.
• Jede Oberflächenänderung geht durch die Store-Prüfung, sofern Sie keinen Live-Update-Dienst einsetzen.
• Xcode, Signierung und Gradle gehören dauerhaft zum Projekt. Planen Sie, wer das im Team beherrscht.

React Native mit Expo: Neubau mit Wiederverwendung

Was Sie mitnehmen: Hooks mit Geschäftslogik, State-Management wie Zustand oder Redux, TanStack Query, API-Clients, TypeScript-Typen, Validierung und Übersetzungsdateien. Was neu entsteht: alle Komponenten mit DOM-Elementen, das Styling, DOM-basierte UI-Bibliotheken und das Routing (Expo Router oder React Navigation statt React Router).

Ein Neubau ist gerechtfertigt, wenn mindestens eines davon zutrifft:

1. Die App muss vollständig offline arbeiten und später synchronisieren, etwa im Außendienst.
2. Lange Listen, Karten oder Gesten müssen sich wirklich nativ anfühlen.
3. Hintergrundprozesse, Bluetooth-Geräte oder tiefe Systemintegration sind Kernfunktionen.

Ein bewährter Mittelweg: zuerst mit Wrapper veröffentlichen, Nutzung messen und erst dann über native Teile entscheiden.

So unterstützt jocapps

Mit WebViewGold wird Ihre gehostete React-App zur nativen iOS- und Android-App mit Push, Offline-Modus und mehr als 40 nativen APIs – als Einmalkauf, ohne Eingriff in den bestehenden Code. Für Capacitor-Projekte, einen Neubau mit React Native oder den langfristigen Betrieb mit SLA ist OnlineAppCreator zuständig, unser ISO-zertifiziertes Delivery-Team in Deutschland. Die Grundsatzfrage behandelt der Leitfaden WebView-App vs. native App (englisch).

Sie möchten Ihre Codebasis einordnen lassen? Buchen Sie ein kostenloses Erstgespräch mit 30 Minuten Dauer.