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.

Martin Donadieu

Martin Donadieu

Inhaltsmarketer

Convert Your Lovable App to iOS and Android with Capacitor

Einführung

Lovable Lovable ist ein AI-gestützter App-Baukasten, der Prompte 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, auf dem Bildschirm sitzen wie jede andere native App?

Dieses Leitfaden führt durch den gesamten Weg: Export aus Lovable, Umhüllung der Web-App mit Capacitor, mit der Erstellung von signierten iOS- und Android-Binären im Cloud mit Capgo Builder (kein Mac erforderlich), eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit Capgo Live Updates.

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

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

Am Ende werdet Sie haben:

  • Ein native iOS- und Android-App, die aus der Cloud erstellt wird — kein Xcode oder Android Studio auf dem Hauptweg.
  • 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 (neueste — herunterladen von nodejs.org)
Git To clone your Lovable repo from GitHub
Capgo __CAPGO_KEEP_0__-Konto Kostenlose Registrierung

— Cloud-Builds und Live-Updates

Kosten (nur zum öffentlichen Veröffentlichen): Artikel
Kosten Apple-Entwickler-Programm
Google Play Console $25 einmalig
Cursor Pro $20/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen)
Capgo Frei verfügbar; Bezahlpläne für die Produktionsgröße

Optional (nur lokaler Simulator):

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 mit code beginnen, sollten Sie wissen, dass die Art der Webanwendung, die Lovable generiert, die mobile Verpackung beeinflusst.

Für eine lange Zeit war Lovable’s Standard eine React + Vite-Einseitige Anwendung (SPA). Ab Mai 2026 können brandneue Lovable-Anwendungen standardmäßig TanStack Start mit server-seitiger Rendering (SSR) verwenden SSR ist großartig für die Webanwendung, aber Capacitor umhüllt eine statistische Konstruktion — ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seinem Kern — das innerhalb der App auf dem Gerät läuft.

Eine SSR-App erwartet, dass eine Server-Seiten auf jeden Anfrage rendern. Es gibt keinen Server innerhalb eines Telefons, also möchten Sie für Capacitor statistische, client-seitig gerenderte Ausgabe.

Was tun:

  • Von vorne beginnen: Bitte Lovable für eine eine Single-Page-App (SPA) oder um die SSR zu umgehen, damit Sie eine statische dist/ Ordner.
  • Bereits auf TanStack Start (SSR): Konfigurieren Sie es, um vorher zu rendern oder eine statische SPA auszugeben. Die einzige schwierige Anforderung ist ein statischer Build-Ordner, der enthält index.html.
  • Legacy Next.js Lovable Projekte: Verwenden Sie static export — der Ausgang geht zu out/ anstatt dist/.

Unabhängig vom Framework, das Sie verwenden, zeigen Sie auf das Verzeichnis Capacitor. webDir Für eine Vite-SPA ist das Verzeichnis dist.

Schritt 1 — Exportieren Sie Ihre liebenswerte App in GitHub

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

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

Lovable.dev GitHub Verbindung

Lovable.dev GitHub Autorisierung

Lovable.dev Repository-Einrichtung

Lovable.dev Projekt exportiert

Erfolg: Besuchen github.com/YOUR-USERNAME/your-app zeigt Ihnen die code Ihres Apps.

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 Cursor, einen künstlich-intelligenzbasierten Editor, der Befehle für Sie im Terminal ausführen kann.

Cursor herunterladen und installieren

  1. Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
  2. Installieren Sie Cursor, indem Sie die Anweisungen im Installationstool befolgen
  3. Öffnen Sie Cursor, sobald er installiert ist

Starten Sie Cursor

Konfigurieren Sie den Cursor für die AI-Entwicklung

Für die beste Erfahrung konfigurieren Sie den Cursor, bevor Sie beginnen:

  1. Ein Cursor-Plan kaufen — 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 die Ausführung von Befehlen
  2. Cursor-Einstellungen öffnen indem Sie Command+, (Mac) oder Ctrl+, (Windows)

Cursor-Einstellungen

  1. AI-Modelle aktivieren — Stellen Sie sicher, dass die AI-Funktionen aktiviert sind:

Modelle zulassen

  1. Wählen Sie Ihre bevorzugte Modelle — Wählen Sie Claude oder GPT-4 für beste Ergebnisse:

Wählen Sie das Cursor-Modell

  1. Erlauben Sie die Ausführung von Befehlen — Aktivieren Sie Cursor, um Befehle für Sie auszuführen:

Erlauben Sie die Ausführung von Befehlen

Klonen Sie Ihr Repository in Cursor

  1. In Cursor drücken Sie Shift+Command+P (Mac) oder Shift+Ctrl+P (Windows) zum Öffnen des Befehlsfensters
  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

In Cursor klonen

  1. Cursor wird Ihr Projekt klonen und öffnen

In Cursor öffnen

Schritt 3 — Abhängigkeiten installieren und lokal ausführen

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

Die AI wird automatisch Ihren Betriebssystem, Node.js installieren und ausführen npm install, und starten Sie den Entwicklungs-Server mit npm run dev.

Installieren Sie Homebrew

Methode 2: Manuelle Installation

Öffnen Sie das Terminal in Cursor, indem Sie die Tastenkombination 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 die 24 LTS Installationsdatei von nodejs.org
  2. Installationsprogramm ausführen
  3. Terminal öffnen und ausführen:
cd your-lovable-app
npm install
npm run dev

Lovable.dev-Anwendung läuft lokal

Lovable-Anwendungen laufen typischerweise auf http://localhost:8080 oder http://localhost:5173 oder

App-Fluss Ctrl + C — verwenden Sie die Adresse, die Ihr Terminal ausgibt.

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

Erfolg:

Capacitor needs a production build before you add native platforms.

React + Vite (die meisten liebenswerten 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, so dass Assets innerhalb des nativen WebView laden:

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

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

Erstellen und überprüfen Sie:

npm run build

Sie sollten ein Verzeichnis mit dist/ sehen, das index.html an seiner Wurzel enthält.

Lovable.dev statische Export-Erfolg

Erfolgreiche Next.js Lovable-Projekte

Wenn Ihr Repository Next.js verwendet, fragt Cursor:

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

Oder folge Konvertieren Sie Ihre Next.js-Anwendung in eine mobile App zum vollständigen next.config Setup, dann verwenden Sie webDir: 'out' in Capacitor instead of dist.

Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/Eine statische Build-Ordner-Existenz ( index.html.

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

Capacitor hüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien ein — keine Umstellung erforderlich.

Drücken Sie 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

Der AI wird nach Ihrem Anwendungsname und context":"Seite/Bereich: Capgo-Marketing-Website. Rolle: Kurzbeschriftung oder Navigationspunkt. Anzeige in: Seite trust.astro. Nachrichtsschlüssel `und` (Und)." Bündel-ID com.yourcompany.myapp).

(z. B. Capacitor-Initialisierung

Methode 2: Manuelle Installation

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

Wenn gefragt:

Aufforderung Beispiel Hinweise
Anwendungsname Mein Liebes App Unter der App-Symbolleiste angezeigt
Anwendungs-ID com.yourcompany.meineapp Umkehr-domänen-Style — kann nicht nach Veröffentlichung im App-Store geändert werden
Verzeichnis für Web-Ressourcen dist Verwenden Sie out zur statischen Exportierung von Next.js

Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Paket-IDs sind global eindeutig. Verwenden Sie eine rückwärtsgeordnete Domänen-ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an — Ändern Sie sie später bedeutet, dass Sie überall nachfinden und ersetzen müssen ios/ und android/ und

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

Capacitor platforms added

Configure Capacitor

Fragen Sie Cursor:

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

Zur statischen Exportierung von Next.js, fragen Sie es, out __CAPGO_KEEP_0__

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;

Bauen und Synchronisieren

Erzähle Cursor:

Build the production web app and sync it with Capacitor platforms

Methode 2: Manuelle Befehle

npm run build
npx cap sync

Capacitor Synchronisierung 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 automatisch Swift Package Manager für iOS-Abhängigkeiten.

Erfolg: ios/ und android/ Ordner erscheinen und der Terminal zeigt Sync finished.

Schritt 6 — Überprüfen Sie Ihren .gitignore

Capgo Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ muss eingereicht werden. Eine häufige Fehlhandlung ist das Ignorieren von ihnen am Repo-Root.

Bestätigen:

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

erfolg git status zeigt ios/ und android/ bereit, zu committieren (nicht ignoriert).

Schritt 7 — Commit und Push

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

erfolg Ihr GitHub-Repo zeigt das ios/ und android/ Ordner.

Schritt 8 — Erstellen Sie mit dem Capgo-Builder binäre Dateien, die in den App-Stores bereitgestellt werden können.

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

Konfigurieren Sie den 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

Speichern Sie die Signierungsanmeldeinformationen einmal. Wenn Sie Hilfe bei der Erstellung benötigen, nutzen Sie unsere kostenlose Tools:

Siehe Konten verwalten und iOS von Windows erstellen.

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

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

Installieren Sie auf einem echten Gerät:

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

Erfolg: Ein signierter Build ist abgeschlossen und Sie können es auf einem echten Gerät installieren.

Schritt 9 — Optional: Lokal testen in Xcode oder Android Studio

Wenn Sie ein Mac haben oder vor der Cloud-Bereitstellung Emulatortests durchführen möchten:

Für iOS

Open the iOS project in Xcode

Methode 2: Manuelle Befehlszeile

npx cap open ios

Xcode-Öffnen des Lovable-Projekts

Erstmalige Xcode-Einrichtung:

  1. Wählen Sie ein Simulator aus dem Geräte-Auswahlfeld (z. B. iPhone 15)
  2. Für echte Geräte: Aktivieren Sie Automatische Signierung verwalten und wählen Sie Ihr Apple-Entwickler-Team
  3. Klicken Sie auf die ▶️ Play-Taste — die erste Build dauert 5–10 Minuten

Lieblings-App läuft auf iOS

Für Android

Open the Android project in Android Studio

Methode 2: Manuelle Befehlsausführung

npx cap open android

Android Studio öffnet Lovable-Projekt

Erstmalige Android Studio-Einrichtung:

  1. Installieren Sie fehlende SDK-Pakete, wenn angefordert
  2. Erstellen Sie einen Emulator im Gerätemanager (z. B. Pixel 6, API 33+)
  3. Klicken Sie auf den grünen ▶️-Startknopf — erste Build dauert 5–15 Minuten

Lieblings-App läuft auf Android

Verwenden Sie lokale IDEs für den täglichen Debugging. Verwenden Sie 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 — Lebendes Reload (Entwicklung) aktivieren

Die Iteration beschleunigen, indem Sie die native Shell auf Ihre lokale Entwicklungs-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 Sie 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;

Verwenden Sie den Port 8080 oder 3000 Wenn das so ist npm run dev druckt.

  1. Änderungen anwenden:
npx cap copy

Live-Neustart aktiviert

Erfolg: Änderungen an Ihrem Web-code werden auf dem Gerät oder dem Simulator live neu geladen.

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

Ein Capacitor-Plugin ermöglicht es JavaScript, auf echte Gerätefunktionen zuzugreifen. Wir fügen das Kamera-Plugin hinzu, damit die 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 — zu den 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 <manifest> in 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;
}

Hinzugefügte native Funktionen

Hinzufügen eines Plugins erfordert ein eine frische native Build durch Capgo Builder, bevor es auf Geräten funktioniert.

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

Schritt 12 — Fügen Sie Capgo Live Updates hinzu

Jede native Änderung geht normalerweise durch die App-Store-Bewertung. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates

Pushen Sie Änderungen an der Web-Schicht Ihres Apps (HTML, CSS, JS, Bilder) in Minuten über die Luft. Installieren Sie den Updater in Ihrer ersten Veröffentlichung

npm install @capgo/capacitor-updater
npx cap sync

Damit Sie nie auf die Bewertung warten müssen, wenn Sie eine Reparatur ausliefern müssen. 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;

Hinzufügen src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Commit, push, and run a new Capgo Builder build so the updater SDK is in the native shell.

Commit, pushen und ausführen Sie einen neuen __CAPGO_KEEP_0__ Builder-Build, damit der Updater __CAPGO_KEEP_1__ im nativen Shell ist.

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

Hochladen Sie Web-Bundles nach der Veröffentlichung: Capgo Live Updates docs.

Um diese Uploads automatisch durchzuführen, sobald jemand klickt Veröffentlichen Folge diesen Schritten Automatisiere Capgo Live-Updates von Lovable mit GitHub Aktionen.

Erfolg: Updater-Plugin ist installiert und läuft bei Start. notifyAppReady() Schritt 13 — Statusleistenabstand korrigieren mit einer Live-Update

Auf einem echten iPhone sitzt Ihr Header möglicherweise

unter der Statusleiste (Uhr und Batterie). Moderne __CAPGO_KEEP_0__ zeichnet sich bis an die Ränder, daher muss Ihre App die sicheren Bereiche einhalten the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect safe: env(safe-area-inset-top), -bottom, -left, -right.

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

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

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

2. Fixierung der oberen Kopfzeilen — verwenden max() um das Web-Padding beizubehalten und auf nichtierten 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) zur oberen Padding-Einstellung jeder Seitekopfzeile hinzu, wobei die bestehende Padding-Einstellung als Minimalwert bleibt.” max()3. Verschicken Sie die Reparatur über die Luft

3. Verschicken Sie die Reparatur über die Luft --- dies ist rein CSS, keine native Rebuild 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

Schließen Sie die App auf Ihrem Gerät, öffnen Sie sie erneut, warten Sie etwa 15-30 Sekunden und öffnen Sie sie erneut. Der Header sollte sich unter der Statusleiste befinden — ohne App-Store-Bewertung repariert.

Erfolg: Der Top-Inhalt klärt die Statusleiste nach dem Anwenden des OTA-Bundles.

Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge display.

__CAPGO_KEEP_0__ edge-to-edge-Bildschirm

Schritt 14 — Vorbereitung Ihrer Store-Liste

  • Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Der Start in den öffentlichen Stores ist hauptsächlich Papierkram: App-Icon-Datei (App-Icon-Datei):
  • Screenshots — Apple erfordert iPhone 6.9“ (1320×2868px) Screenshots
  • Appname, Untertitel, Beschreibung, Schlüsselwörter
  • Datenschutzrichtlinien-URL — erforderlich für beide Stores, auch für kostenlose Apps
  • Altersfreigabe — Fragebogen in jedem Konsole
  • Datenverarbeitungsmitteilungen — Apple-Privacy-Nährwertetiketten und Google-Datensicherheit
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 Testphase (persönliche Konten, die nach dem 13. November 2023 erstellt wurden): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion. iOS hat kein Äquivalent.
  2. Für die Überprüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Testanforderungen erfüllt sind.

Siehe unser Leitfaden für die erste App-Überprüfung für die vollständige Liste.

Häufige Fehler (und wie man sie behebt)

  • Could not find the web assets directory: ./dist — Ausführen npm run build vorher npx cap add oder npx cap sync. Stelle sicher webDir in capacitor.config.ts entspricht Ihrem Framework-Ausgabe (dist für Vite, out für Next.js statische Export).
  • “This App ID … is not available” — Bundle-IDs sind global eindeutig. Wähle einen rückwärts-domänen-Id, den du kontrollierst.
  • iOS-Build fehlt nach dem Ändern der Bundle-ID — Die ID in Ihrem native Projekt muss mit Apple App Store Connect übereinstimmen. Find-and-replace über ios/ und android/, commit, rebuild.
  • Weißer Bildschirm bei der Start — Set base: './' in der Vite-Konfiguration, neu erstellen und ausführen npx cap sync.
  • Inhalt unter der Statusleiste — Add viewport-fit=cover und env(safe-area-inset-top) Pufferhöhe (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 oder Buildnummer in native Projekten erhöhen und neu erstellen.

Für Capgo Builder-Probleme, siehe Native Build-Troubleshooting und Live Updates debugging.

Schlussfolgerung

Sie haben eine liebenswerte Web-Anwendung in eine native iOS- und Android-Anwendung umgewandelt – in der Cloud gebaut, ohne einen Mac, mit einer echten Kamera-Funktion und einer Layout-Korrektur, die über die Luft verschickt wurde. Das ist die schwierige Arbeit erledigt.

Zukünftige Schritte

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

Ressourcen

Fortsetzen Sie von Convert Your Lovable App zu iOS und Android mit Capacitor

Wenn Sie bereits ein liebenswertes Entwickler-App haben Convert Your Lovable App to iOS and Android with Capacitor um native Plugin-Arbeit zu planen, mit ihr zu verbinden Capgo Plugin Directory für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor-Plugins durch Capgo Capgo nativee Native Builds für den Produktworkflow in Capgo Native Builds, und Aus iOS auf Windows erstellen für Cloud- iOS-Builds ohne einen Mac.

Live-Updates für Capacitor-Anwendungen

Wenn ein Bug im Weblayer live 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.

Unterstützung durch Menschen von Martin

Los geht's!

Neueste Beiträge aus unserem Blog

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