Zum Hauptinhalt springen
Anleitung

Convert Your Lovable App to iOS and Android with Capacitor

Step-by-step guide to export your Lovable project, wrap it with Capacitor, build signed iOS and Android apps in the cloud with Capgo Builder, and ship fixes over the air.

Artikelcredits

Martin Donadieu

Schreiber

Valeria

Rezensent

Jordan

Editor

Mit Capacitor Ihre lieb gewonnene App auf iOS und Android umwandeln

Einführung

Lieblingsapp ist eine AI-App-Bauanlage, die Anfragen in Minuten in funktionierende React-Apps verwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, wo sie auf dem Homescreen sitzt wie jede andere native App?

Dieses Leitfaden führt durch den gesamten Weg: Ausgabe aus Lovable, die Web-App mit __CAPGO_KEEP_0__ umwickeln Capacitor, binäre iOS- und Android-Dateien im Cloud mit __CAPGO_KEEP_0__ Builder erstellen Capgo-Bauer , eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit __CAPGO_KEEP_0__ Live Updates durchführen Capgo Live Updates.

Wir verwenden Cursor durchgängig — seine KI kann die meisten Terminal-Befehle für Sie ausführen, wenn Sie sie manuell nicht eingeben möchten.

Zeitaufwand: ca. 1–2 Stunden zum ersten Mal, hauptsächlich Einrichtung des Kontos und Warten auf Cloud-Builds.

Am Ende haben Sie:

  • Eine native iOS- und Android-App, die aus der Cloud erstellt wurde — kein Xcode oder Android Studio im Hauptpfad
  • Die App läuft auf einem echten Gerät (TestFlight, direkte Installation oder Play-Interner Test)
  • Eine funktionierende Kamerafunktion, die nur eine native App bieten kann
  • Live-Updates konfiguriert, damit UI- und CSS-Fixes ohne Store-Überprüfung verschickt werden

Voraussetzungen

Anforderung Details
Ein Computer Mac, Windows oder Linux — Cloud-Builds funktionieren von jedem Betriebssystem aus
Ein code-Editor Cursor (empfohlen) oder VS Code
Node.js 24 LTS (zuletzt — herunterladen von nodejs.org) Git)
Git Klonen Sie Ihren Lovable-Repo von GitHub.
Capgo Konto Free signup — Cloud-Builds und Live-Updates

Kosten (nur für öffentliche Veröffentlichung):

Artikel Kosten
Apple-Entwickler-Programm 99 $/Jahr
Google Play Console 25 $/Einzahlung
Cursor Pro 20 $/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen)
Capgo Freit tariff verfügbar; Bezahlpläne für Produktionsmaßstab

Optional (lokaler Simulator nur):

Werkzeug Wozu
Xcode (~15 GB, macOS nur) iOS-Simulator auf Ihrem Mac
Android Studio (~1 GB + SDKs) Android-Emulator

Sie können beide überspringen. Der Hauptweg in dieser Anleitung baut im Cloud und installiert auf echten Geräten ohne sie.

Eine kurze Anmerkung zu Lovable und Frameworks

Bevor Sie code berühren, wissen Sie, dass die Art der Web-App, die Lovable generiert, den mobilen Einhüllung beeinflusst.

Für eine lange Zeit war das Standard von Lovable ein React + Vite-Einseitige Anwendung (SPA)Ab Mai 2026 können neue Lovable-Anwendungen standardmäßig TanStack Start mit serverseitiger Rendering (SSR) verwenden SSR ist großartig für die Webanwendung, aber Capacitor umhüllt eine statische Ausgabe — ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seiner Spitze — die innerhalb der App auf dem Gerät verschickt wird.

Eine SSR-Anwendung erwartet, dass eine Server-Seite Seiten auf jeder Anfrage rendern. Es gibt keinen Server in einem Telefon, also möchten Sie für Capacitor stattdessen statische, client-seitig gerenderte Ausgabe.

Was tun:

  • Von vorneherein: Bitte Lovable um eine Einseitige Anwendung (SPA) oder um das SSR zu umgehen, um statische dist/ folder.
  • Bereits auf TanStack Start (SSR): Configure it to pre-render or output a static SPA. The only hard requirement is a static build folder containing index.html.
  • Erfolgreiche Next.js-Lieblingsprojekte: Use — geht in den — geht die Ausgabe aus out/ anstatt von dist/.

Unabhängig vom Framework, das Sie verwenden, zeigen Sie Capacitor's webDir an diesem Ordner. Für eine Vite-SPA ist das der dist.

Schritt 1 — Exportieren Sie Ihre bezaubernde App in GitHub

Bezaubernd hält Ihre code in seinem Editor, bis Sie GitHub verbinden.

  1. Öffnen Sie Ihr Bezaubernd-Projekt im Browser
  2. Klicken Sie Upgrade (oben rechts), falls erforderlich, dann öffnen Sie Git im linken Menü
  3. Wählen Sie GitHub, Lovable autorisieren und Ihren Account verknüpfen
  4. Lieblingsanwendung erstellt einen Repository und pusht Ihre App automatisch

Lieblingsanwendung.dev GitHub-Verbindung

Lieblingsanwendung.dev GitHub-Autorisierung

Lieblingsanwendung.dev Repository-Einrichtung

Lieblingsanwendung.dev Projekt exportiert

✅ Erfolg: Besuchen github.com/YOUR-USERNAME/your-app zeigt Ihre App’s code.

Schritt 2 — Setzen Sie den Cursor und klonen Sie Ihr Projekt

Bevor wir mit Ihrer code lokal arbeiten können, benötigen Sie einen code Editor. Wir empfehlen CursorEine AI-gestützte Editor, der für Sie Befehle im Terminal ausführen kann.

Herunterladen und Installieren von Cursor

  1. Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
  2. Installieren Sie Cursor, indem Sie die Installationsoberfläche befolgen
  3. Einmal installiert, öffnen Sie den Cursor

Starten Sie Cursor

Konfigurieren Sie Cursor für die AI-Entwicklung

Konfigurieren Sie Cursor vorher, um den besten Erfolg zu erzielen:

  1. Kaufe eine Cursor-Planung — Während Cursor eine kostenlose Ebene bietet, bietet ein Pro-Plan (20 $/Monat) Ihnen unbeschränkte AI-Vervollständigungen, Zugriff auf Claude und GPT-4 sowie Befehlsausführung
  2. Öffnen Sie die Cursor-Einstellungen indem Sie auf Command+, (Mac) oder Ctrl+, (Windows)

Mauszeichen-Einstellungen

  1. KI-Modelle aktivieren — Make sure AI features are enabled:

KI-Modelle zulassen

  1. Wählen Sie Ihr bevorzugtes Modell — Wählen Sie Claude oder GPT-4 für die besten Ergebnisse:

Wählen Sie das Mauszeichen-Modell

  1. Kommandoausführung zulassen — Cursor aktivieren, um Befehle für Sie auszuführen:

Lassen Sie Befehle ausführen

Klonen Sie Ihren Repository in Cursor

  1. In Cursor, drücken Sie Shift+Command+P Mac: oder Shift+Ctrl+P Windows: , um das Befehlsfeld zu öffnen
  2. Tippen Sie "clone" und wählen Sie Git: Klonen"
  3. Fügen Sie Ihre GitHub Repository-URL ein: https://github.com/YOUR-USERNAME/your-lovable-app.git
  4. Wählen Sie einen Ordner, in dem Sie das Projekt speichern möchten

Klonen in Cursor

  1. Cursor wird Ihr Projekt klonen und öffnen

Öffnen in Cursor

Schritt 3 — Installieren Sie Abhängigkeiten und lokal ausführen

  1. Öffnen Sie die AI-Taste von Cursor, indem Sie Command+K (Mac) oder Ctrl+K (Windows)
  2. Tippen Sie die folgende Befehlszeile ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

Die AI detektiert automatisch Ihr Betriebssystem, installiert Node.js, führt npm install, und startet den Entwicklungs-Server mit npm run dev.

Installieren Sie Homebrew

Method 2: Manuelle Installation

Öffnen Sie das Terminal in Cursor, indem Sie Shift+Command+T (Mac) oder Shift+Ctrl+T Windows, dann:

Für macOS:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Für Windows:

  1. Herunterladen Sie das 24 LTS Installationsprogramm von nodejs.org
  2. Das Installationsprogramm ausführen
  3. Öffnen Sie das Terminal und führen Sie:
cd your-lovable-app
npm install
npm run dev

Lovable.dev-Anwendung läuft lokal

Lovable-Anwendungen laufen typischerweise auf http://localhost:8080 or http://localhost:5173 — verwenden Sie die Adresse, die Ihr Terminal ausgibt.

Drücken Sie Ctrl + C um die Entwicklungs-Server zu beenden, wenn Sie bereit sind, fortzufahren.

✅ Erfolg: Ihre App öffnet sich im Browser mit funktionierender Benutzeroberfläche.

Schritt 4 — Vorbereitung der statischen Produktionsvorlage

Capacitor benötigt eine Produktionsversion, bevor Sie native Plattformen hinzufügen.

React + Vite (die meisten Lovable-Apps)

Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Methode 2: Manuelle Konfiguration

Bestätigen vite.config.ts verwendet eine relative Basis, sodass Assets innerhalb des nativen WebView geladen werden:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Erstellen und überprüfen:

npm run build

Sie sollten ein Verzeichnis mit dist/ Ordner mit index.html Lovable.dev-Statikexport erfolgreich

Legacy Next.js-Lovable-Projekte

Legacy Next.js Lovable Projekte

Wenn Ihr Repository Next.js verwendet, fragen Sie Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

Oder folgen Method 2: Manual Configuration Für die vollständige next.config Setup, verwenden Sie dann webDir: 'out' in Capacitor anstatt dist.

✅ Erfolg: Eine statische Build-Ordner existiert (dist/ oder out/) with index.html.

Schritt 5 — Fügen Sie Capacitor und Native Plattformen hinzu

Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.

(Mac) oder Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

Die AI wird nach Ihrem App-Namen und Bundle-ID (z.B. com.yourcompany.myapp).

Capacitor-Initialisierung

Methode 2: Manuelle Installation

npm install @capacitor/core @capacitor/cli
npx cap init

Wenn Sie dazu aufgefordert werden:

Aufforderung Beispiel Hinweise
Anwendungsname Mein liebes App Zeigt sich unter dem App-Icon
Anwendungs Paket ID com.yourcompany.meineapp Umgekehrter Domänenstil — cannot change after store publish
Verzeichnis für Web-Assets dist Use out für die statische Exportierung von Next.js

Wählen Sie eine Paket-ID, die Ihnen gehört. Paket-IDs sind weltweit einzigartig. Verwenden Sie eine rückwärts-domänen-basierte ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an – Änderungen später bedeuten Find- und Ersetzen überall. ios/ und android/ und neu aufzubauen.

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor Plattformen hinzugefügt

Capacitor konfigurieren

Cursor fragen:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Für Next.js-Statikexport, fragen Sie es, es zu verwenden out anstatt.

Methode 2: Manuelle Konfiguration

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Erstellen und Synchronisieren

Cursor sagen:

Build the production web app and sync it with Capacitor platforms

Methode 2: Manuelle Befehle

npm run build
npx cap sync

Capacitor synchronisiert abgeschlossen

Ihr Projekt sieht jetzt so aus:

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

Keine CocoaPods erforderlich. Capacitor 8 verwendet den Swift Package Manager für iOS-Abhängigkeiten automatisch.

✅ Erfolg: ios/ und android/ Schritte 6 — Überprüfen Sie Ihr Sync finished.

__CAPGO_KEEP_0__ Der Builder kompiliert aus Ihrem Git-Repository, also .gitignore

Capgo Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ Schritt 6 — Überprüfen Sie Ihr. Ein häufiger Fehler ist das Ignorieren von ihnen an der Repo-Root.

Bestätigung:

  • Root .gitignore ignoriert node_modules und dist sich selbst (die Cloud rekonstruiert dist während Web-Builds)
  • ios/ und android/ sind nicht ignoriert Erfolg:

✅ __CAPGO_KEEP_0__ git status zeigt ios/ und android/ bereit, zu verpflichten (nicht ignoriert).

Schritt 7 — Commit und Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Erfolg: Ihr GitHub-Repository zeigt die ios/ und android/ Ordner.

Schritt 8 — Mit dem Capgo-Builder Store-fertige Binärdateien erstellen

Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu verschicken. Capgo-Builder komponiert, signiert und kann iOS- und Android-Builds aus dem Cloud bereitstellen.

Konfiguration von Capgo Builder

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Speichere Anmeldeinformationen einmal. Nutze unsere kostenlose Tools, wenn du Hilfe bei ihrer Erstellung benötigst.

Siehe Verwaltung von Anmeldeinformationen und iOS von Windows bauen.

Eine Cloud-Build anfordern

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

Build-Protokolle fließen in Ihrem Terminal ein. Mit App Store Connect konfiguriert, können iOS-Bauten automatisch auf TestFlight hochgeladen werden.

Installieren auf einem echten Gerät:

  • iOS: TestFlight (empfohlen) oder eine Entwicklungsversion mit Ihrem Geräte-UDID registriert
  • Android: Google Play interne Testspur oder eine signierte Release-APK/AAB

✅ Erfolg: Ein signiertes Build wird abgeschlossen und Sie können es auf einem echten Gerät installieren.

Schritt 9 — Optional: Testen Sie lokal in Xcode oder Android Studio

Wenn Sie einen Mac haben oder Emulator-Tests vor Cloud-Builds bevorzugen:

Für iOS

Open the iOS project in Xcode

Methode 2: Manuelle Befehlszeile

npx cap open ios

Xcode-Projekt Lovable öffnen

Erste Xcode-Einrichtung:

  1. Ein Simulator aus der Geräte-Auswahl (z.B. iPhone 15) auswählen
  2. Für echte Geräte: Zertifikatsverwaltung aktivieren und Ihre Apple-Entwickler-Team auswählen und wählen Sie Ihr Apple-Entwickler-Team
  3. Klicken Sie auf den ▶️ Play-Button — die erste Build dauert 5–10 Minuten

Liebhaber-App auf iOS

Für Android

Open the Android project in Android Studio

Android Studio öffnet Lovable-Projekt

npx cap open android

Android Studio öffnet das Lovable-Projekt

Erstezeit Android Studio Einrichtung:

  1. Install missing SDK packages if prompted
  2. Erstellen Sie einen Emulator im Gerätemanager (z. B. Pixel 6, API 33+)
  3. Klicken Sie auf den grünen ▶️-Button — die erste Build dauert 5–15 Minuten

Lieblings-App läuft auf Android

Use local IDEs for day-to-day debugging. Use Capgo Builder wenn Sie signierte Release-Dateien benötigen

✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt Ihr Lovable-Inhalt.

Schritt 10 — Live Reload aktivieren (Entwicklung)

Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihre lokale Dev-Server zeigen.

Sagen Sie Cursor:

Set up live reload for Capacitor development with my local IP address

Methode 2: Manuelle Einrichtung

  1. Finden Sie Ihre lokale IP-Adresse:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. Aktualisieren capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Verwende Port 8080 oder 3000 Wenn das, was Sie wollen, gedruckt wird. npm run dev prints.

  1. Live-Neuladen aktiviert
npx cap copy

Lebendliche Wiederverladung aktiviert

✅ Success: Änderungen an Ihrem Web code laden sich auf dem Gerät oder im Simulator neu.

Schritt 11 — Hinzufügen einer nativen Funktion: Die Kamera

Ein Capacitor-Plugin ermöglicht es JavaScript, echte Gerätefunktionen aufzurufen. Wir fügen das Camera-Plugin hinzu, damit Benutzer ein Foto machen können — etwas, das ein Browserfenster nicht zuverlässig tun kann.

Erzählen Sie Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Methode 2: Manuelle Installation

npm install @capacitor/camera
npx cap sync

iOS — hinzufügen ios/App/App/Info.plist innerhalb der obersten Ebene <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — fügen Sie innerhalb hinzu <manifest> innerhalb android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

Native Funktionen hinzugefügt

Ein Plugin hinzufügen erfordert ein ein frisches natives Build durch Capgo Builder vorher, damit es auf Geräten funktioniert.

✅ Erfolg: Kamera code kompiliert und npx cap sync endet ohne Fehler.

Schritt 12 — Capgo Live Updates hinzufügen

Jede native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates Änderungen an deiner App-Layer (HTML, CSS, JS, Bilder) über das Air übertragen in Minuten.

Installiere den Updater in deiner ersten Veröffentlichung so Sie sind nie auf eine Überprüfung warten, wenn Sie ein Fix ausliefern müssen.

npm install @capgo/capacitor-updater
npx cap sync

Hinzufügen capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Initialisieren Sie in Ihrer App-Einstieg (z.B. src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commit, pushen und einen neuen Capgo Builder-Build ausführen, damit der Updater SDK im native Shell ist.

Hochladen Sie Web-Bundles nach dem Launch:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Siehe Capgo Live-Updates-Dokumentation.

Um dies automatisiert zu machen, wenn jemand auf "Veröffentlichen" klickt Veröffentlichen in Lovable, folge Automatisieren Sie Capgo Live Updates mit GitHub Aktionen.

✅ Success: Updater-Plugin ist installiert und notifyAppReady() läuft bei Start.

Schritt 13 — Statusleistenabstand mit einem Live Update korrigieren

Im echten iPhone sitzt Ihr Header möglicherweise unter der Statusleiste (Uhrzeit und Batterie). Moderne Capacitor zeichnet sich durch eine Randlosigkeit aus, daher muss Ihre App dies respektieren safe area insets: env(safe-area-inset-top), -bottom, -left, -right.

Viele Lovable-Apps behandeln bereits die untere Einstellung, verwenden aber eine feste obere Padding (wie pt-6ohne das obere Inset

1. Bestätigen viewport-fit=cover 1. Confirm index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Korrigiere oberste Überschriften — verwenden max() um Web-Abstand zu erhalten und auf Notch-Geräten zu wachsen:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

In Cursor oder Lovable, fragen Sie:

“Die App-Inhalte laufen unter der Statusleiste oben auf dem Mobilgerät. Fügen Sie env(safe-area-inset-top) zum oberen Abstand jeder Seitekopf hinzu, indem Sie max(), wobei der bestehende Abstand als Mindestwert bleibt.”

3. Verschicken Sie die Korrektur über die Luft: — dies ist reinen CSS, kein natives Neubauen erforderlich:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Zwingen Sie das Gerät, sich zu schließen, öffnen Sie es erneut, warten Sie ~15–30 Sekunden und öffnen Sie es erneut. Der Kopf sollte sich unter der Statusleiste befinden — korrigiert, ohne App-Store-Überprüfung.

✅ Erfolg: Der obere Inhalt klärt sich nach der Anwendung des OTA-Bundles von der Statusleiste.

Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor Kantenlos-Display.

Schritt 14 — Vorbereitung Ihres Store-Eintrags

Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Der Start in den öffentlichen Stores ist hauptsächlich Papierkram:

  • App-Icon — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
  • Bildschirmfotos — Apple erfordert iPhone 6.9“ (1320×2868px) Bildschirmfotos
  • App-Name, -Untertitel, -Beschreibung, -Schlüsselwörter
  • Datenschutzrichtlinien-URL — erforderlich von beiden Stores, auch für kostenlose Apps
  • Altersfreigabe — Fragebogen in jedem Konsolenfenster
  • Datenverarbeitungserklärungen — Apple Datenschutz-Nährwertetiketten und Google Daten-Sicherheit
Set up app icons and splash screens for my Capacitor app

Methode 2: Manuelle Einrichtung

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Generierte App-Assets

Was bleibt vor 'live':

  1. Google Play geschlossene Testversion (Kontoerstellungen nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion. iOS hat kein Äquivalent.
  2. Zur Prüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Testanforderungen erfüllt sind.

Siehe unsere erste App-Bewertungsleitfaden zur vollständigen Liste.

Häufige Fehler (und wie Sie sie beheben)

  • Could not find the web assets directory: ./dist — Ausführen npm run build vorher npx cap add erst npx cap syncoder webDir in capacitor.config.ts passt auf Ihre Framework-Ausgabe an ("dist für Vite, out für Next.js-Statikexport).
  • “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen rückwärts-domänen-Bezeichner, den Sie kontrollieren.
  • iOS-Build fehlt nach Änderung der Bundle-ID — Die ID in Ihrem native Projekt muss der Apple App Store Connect entsprechen. Find-and-replace überall ios/ und android/, commit, neu aufbauen.
  • Weißer Bildschirm bei Start — Setzen Sie base: './' in der Vite-Konfiguration, rebuilden und ausführen npx cap sync.
  • Inhalt unter der Statusleiste — Fügen Sie viewport-fit=cover und env(safe-area-inset-top) Puffer (Schritt 13).
  • APK im Debug-Modus signiert — Google Play lehnt Debug-Builds ab. Verwenden Sie einen Release-Build, der mit Ihrem Keystore signiert ist.
  • Die Bereitstellung wurde abgelehnt — Version existiert bereits — Versionsnummer/Buildnummer in native Projekten aktualisieren und neu erstellen.

Für Capgo Builder-Probleme siehe Native Build-Fehlertreiber und Lebendliche Updates-Debugging.

Conclusion

You took a Lovable web app to native iOS and Android — built in the cloud without a Mac, with a real camera feature and a layout fix shipped over the air. That’s the hard part done.

Nächste Schritte

Registrieren Sie sich für ein kostenloses Capgo Konto um Live Updates und Cloud-Native-Builds zu aktivieren.

Ressourcen

Weitermachen von Convert Your Lovable App to iOS and Android mit Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Convert Your Lovable App to iOS and Android mit Capacitor Um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins durch Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Capgo native Builds für den Produktworkflow in Capgo Native Builds und iOS von Windows erstellen für Cloud-IOS-Builds ohne Mac

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug aktiv ist, versenden Sie die Reparatur über Capgo anstatt Tage auf die Genehmigung des App-Store zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Menschliche Unterstützung von Martin

Los geht's jetzt

Neueste Beiträge aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle Mobilanwendung zu erstellen.