Sie haben eine Web-App mit React, Vue oder Svelte und möchten sie in den App Store und den Play Store bringen, ohne alles neu zu schreiben? Capacitor verpackt den vorhandenen Web-Code in native Projekte für iOS und Android und gibt über Plugins Zugriff auf Kamera, Push oder Dateisystem. Die Codex CLI erledigt dabei viel Fleißarbeit direkt im Terminal. Dieser Ratgeber zeigt, wie das Zusammenspiel funktioniert und welche Aufgaben Sie besser selbst in der Hand behalten.
Warum Capacitor und Codex gut zusammenpassen
Capacitor arbeitet mit klaren Kommandos und Konfigurationsdateien: capacitor.config, die Ordner ios und android, ein Build-Schritt für die Web-Assets und anschließend npx cap sync. Diese Struktur ist für einen Coding-Agenten gut nachvollziehbar. Die Codex CLI kann im lokalen Repository Plugins installieren, Konfigurationen anpassen, Berechtigungstexte in Info.plist und AndroidManifest ergänzen und den Web-Build ausführen.
Ein Vorteil gegenüber der Cloud-Variante: Lokal auf einem Mac kann Codex auch die iOS-Seite bauen, etwa per xcodebuild, sofern Sie die entsprechenden Befehle in der Sandbox freigeben.
Bevor Sie starten, lohnt sich ein kurzer Blick auf die Freigabestufen der Codex CLI. Im vorsichtigen Modus fragt der Agent vor jedem Befehl nach, was beim ersten Einrichten sinnvoll ist, weil Sie so sehen, welche Werkzeuge er aufruft. Sobald der Ablauf steht, können Sie mehr Selbstständigkeit innerhalb des Arbeitsverzeichnisses erlauben. Netzwerkzugriffe und Änderungen außerhalb des Projekts sollten weiterhin bestätigt werden müssen.
Der Ablauf in der Praxis
Ein bewährter Weg von der bestehenden Web-App zur ersten Testversion:
- Sie prüfen, dass die Web-App als statischer Build funktioniert, und lassen Codex serverseitige Abhängigkeiten aufspüren, die in einer App nicht laufen.
- Sie installieren Capacitor, legen App-Name und App-ID fest und fügen die Plattformen iOS und Android hinzu.
- Sie lassen Codex die benötigten Plugins einbinden, etwa für Push-Mitteilungen, Kamera, Statusleiste und Splash Screen.
- Sie ergänzen Icons und Startbildschirme in allen geforderten Größen.
- Sie öffnen die nativen Projekte in Xcode und Android Studio, setzen Signierung und Team und testen auf echten Geräten.
- Sie hinterlegen die Schritte als Skripte und in der AGENTS.md, damit künftige Builds reproduzierbar bleiben.
Typische Fallstricke
Viele Web-Apps setzen Routing über die History-API voraus und nutzen absolute Pfade. In der App führt das zu leeren Seiten nach einem Neuladen. Ebenso häufig sind OAuth-Logins, die per Redirect auf eine Web-Adresse zurückspringen. In einer Capacitor-App braucht es dafür Deep Links oder ein System-Browserfenster. Cookies und lokale Speicher verhalten sich im WKWebView anders als im Desktop-Browser, was Sitzungen unerwartet beenden kann. Auf Android sorgt zudem die Zurück-Taste für Überraschungen: Ohne eigene Behandlung schließt sie die App, statt eine Seite zurückzugehen. Lassen Sie Codex diese Fälle gezielt testen und dokumentieren.
Beim Review droht Guideline 4.2, wenn die App nicht mehr bietet als die Website. Planen Sie deshalb echte native Mehrwerte ein und lassen Sie Codex die zugehörigen Plugins sauber integrieren, statt nur einen Rahmen um die Website zu legen.
Achten Sie außerdem auf die Datenschutzseite. Plugins für Push, Analytics oder Crash-Reporting bringen eigene SDKs mit, die im Privacy Manifest von Apple und im Data-safety-Formular von Google auftauchen müssen. Lassen Sie Codex eine Liste aller nativen Abhängigkeiten mit ihrem Zweck erstellen. Diese Übersicht ist die Grundlage für korrekte Angaben und erspart Rückfragen im Review.
Capacitor oder fertiges WebView-Template
Capacitor lohnt sich, wenn Sie Ihren Web-Code selbst kontrollieren und tiefer in native Funktionen einsteigen möchten. Soll dagegen eine bestehende, online gehostete Web-App schnell und mit wenig Code zur App werden, ist ein Template wie WebViewGold oft effizienter: Push, Offline-Modus, Biometrie und In-App-Käufe sind bereits vorbereitet, und der Cloud Builder kommt ohne Xcode und Android Studio aus.
Für Projekte, die Capacitor-Expertise, Production-Hardening und die Einreichung aus einer Hand brauchen, übernehmen die AI Code Engineers von neooutput den Weg in beide Stores. Im kostenlosen 15-Minuten-Erstgespräch klären wir, welche Variante zu Ihrer Web-App passt.
Häufige Fragen
Muss ich meine Web-App für Capacitor umschreiben?
Meist nicht grundlegend. Anpassungen sind vor allem bei Routing, Login-Weiterleitungen, Dateizugriffen und serverseitigem Rendering nötig, weil Capacitor einen statischen Web-Build erwartet.
Kann Codex die App direkt in die Stores hochladen?
Technisch lässt sich ein Upload per Kommandozeile anstoßen, wir empfehlen das aber nicht. Uploads gehören in eine CI-Pipeline mit geschützten Zugangsdaten, nicht in eine Agentensitzung.
Funktionieren Updates ohne neue Store-Version?
Reine Inhaltsänderungen auf dem Server ja. Änderungen am gebündelten Web-Code oder an nativen Plugins erfordern in der Regel eine neue Version und ein erneutes Review.