Zum Hauptinhalt springen
Anleitung

Konvertieren Sie Ihre geliebte App in iOS- und Android-Anwendungen mit Capacitor

Schritt-für-Schritt-Anleitung, um Ihr Lovable-Projekt zu exportieren, es mit Capacitor zu umhüllen, signierte iOS- und Android-Anwendungen im Cloud mit Capgo Builder zu erstellen und Fixes über die Luft zu schicken.

Martin Donadieu

Martin Donadieu

Inhaltsmarketer

Konvertieren Sie Ihre geliebte App in iOS- und Android-Anwendungen mit Capacitor

Einführung

Lovable ist ein AI-App-Builder, der Prompte in Minuten in funktionierende React-Anwendungen 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: Export aus Lovable, das Web-App mit __CAPGO_KEEP_0__ umhüllen 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 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 (neueste — herunterladen von nodejs.org)
Git Um Ihren Lovable-Repo von GitHub zu klonen
Capgo-Konto Kostenloser Registrierungsprozess — Cloud-Builds und Live-Updates

Kosten (nur zum öffentlichen Veröffentlichen):

Artikel Kosten
Apple-Entwicklerprogramm $99/Jahr
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 serverseitiger 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 in einem Telefon, also willst du für Capacitor statistische, client-seitig gerenderte Ausgabe.

Was tun:

  • Von vorneherein: Bitte Lovable für eine eine Single-Page-App (SPA) oder um die SSR zu umgehen, damit du 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 Capacitor auf das entsprechende Verzeichnis. Für eine Vite-SPA ist das Verzeichnis webDir Schritt 1 — Exportieren Sie Ihre liebenswerte App zu __CAPGO_KEEP_0__ dist.

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

Lovable keeps your code in its editor until you connect GitHub.

  1. Klicken Sie
  2. Upgrade (oben rechts), wenn erforderlich, und öffnen Sie dann (oben rechts) Git in der linken Menüzeile
  3. Wählen Sie GitHub, Lovable autorisieren und Ihren Account verbinden
  4. Lovable erstellt ein Repository und drückt 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-intelligenzbetriebenen 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

Cursor für die AI-Entwicklung konfigurieren

Für die beste Erfahrung konfigurieren Sie 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 durch Drücken von Command+, Mac: 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) um das Befehlsfenster zu öffnen
  2. Tippen Sie „clone“ und wählen Sie Git: Clone“
  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 — Installieren Sie Abhängigkeiten und lokal ausführen

  1. Öffnen Sie die AI-Taste von Cursor, indem Sie die Taste drücken: Command+K (Mac) oder Ctrl+K (Windows)
  2. Tippen Sie die folgende Anweisung 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, 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. Laden Sie das 24 LTS Installer von nodejs.org
  2. Installationsprogramm ausführen
  3. Terminal öffnen und ausführen:
cd your-lovable-app
npm install
npm run dev

Anwendung läuft lokal

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

oder Ctrl + C oder

oder Stoppt die Entwicklungsserver, 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 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 Sie:

npm run build

Sie sollten ein Verzeichnis mit dist/ in seinem Wurzel sehen. index.html Press

Lovable.dev statische Export-Erfolgsmeldung

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 Sie Konvertieren Sie Ihre Next.js-Anwendung in eine mobile Anwendung für die vollständige next.config Einrichtung, dann verwenden Sie webDir: 'out' in Capacitor instead of dist.

Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/mit index.html.

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

Capacitor umhüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien — 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

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

Capacitor-Initialisierung

Methode 2: Manuelle Installation

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

Wenn gefragt wird:

Aufforderung Beispiel Hinweise
App-Name Mein Lieblings-App Unter der App-Icon angezeigt
App-Paket-ID com.yourcompany.myapp Umgekehrter Domänen-Stil — kann nicht nach Veröffentlichung im App-Store geändert werden
Web-Asset-Verzeichnis dist Verwenden Sie out für die statische Exportierung von Next.js

Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Bündel-IDs sind weltweit einzigartig. 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

Capacitor Plattformen hinzugefügt

Methode 1: Verwendung von Cursor AI (Empfohlen)

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

Fragen Sie Cursor:« out anstatt.

Method 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;

Build und Synchronisieren

Erzähle Cursor:

Build the production web app and sync it with Capacitor platforms

Method 2: Manuelle Befehle

npm run build
npx cap sync

Capacitor Synchronisierung abgeschlossen

Dein 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/ Fachordner erscheinen und der Terminal zeigt Sync finished.

Schritt 6 — Überprüfen Sie Ihr .gitignore

Capgo Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ muss eingereicht werden. Ein häufiger Fehler besteht darin, sie im Repository-Root zu ignorieren.

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 die ios/ und android/ Ordner.

Schritt 8 — Erstellen Sie mit dem Capgo-Builder binäre Dateien, die für den Laden bereit sind.

Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu liefern. Capgo-Builder Der __CAPGO_KEEP_0__-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 kostenlosen Tools:

Siehe Benennen Sie Anmeldedaten 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

Build-Protokolle streamen Sie 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 in Xcode oder Android Studio testen

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 — Live Reload aktivieren (Entwicklung)

Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihren lokalen Entwicklungs-Server zeigen.

Erzählen 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 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 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 — zum 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 <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

Die Installation eines Plugins erfordert ein frisches natives 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-Überprüfung. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates

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

npm install @capgo/capacitor-updater
npx cap sync

Damit Sie nie auf die Überprüfung 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 führen Sie einen neuen __CAPGO_KEEP_0__ Builder-Build aus, 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 mit einer Live-Update korrigieren

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 safe area insets 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 oberste Abstandspufferung (wie pt-6) ohne die oberste 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. Fix oberer Kopfzeilen — verwenden max() um Web-Abstand zu behalten 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 Abstandspufferung jeder Seitekopfzeile hinzu, wobei der bestehende Abstand als Minimalwert bleibt.” max()3. Verschicken Sie die Reparatur über die Luft

3. Verschicken Sie die Reparatur über die Luft --- dies ist reinen 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 ~15–30 Sekunden und öffnen Sie sie erneut. Der Header sollte sich unter dem Statusbar befinden — ohne App-Store-Bewertung geändert.

Erfolg: Der Top-Inhalt löscht den Statusbar nach dem OTA-Bundle-Anwenden.

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

__CAPGO_KEEP_0__ edge-to-edge-Bildschirm

Schritt 14 — Vorbereitung Ihres Store-Listings

  • Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Die Veröffentlichung in den öffentlichen Stores ist hauptsächlich Papierkram: App-Icon-Datei (App Icon File) — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
  • Screenshots — Apple verlangt 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 (Kontoerstellungen nach dem 13. November 2023): 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. Stellen Sie sicher webDir in capacitor.config.ts entspricht Ihrem Framework-Ausgabe (dist für Vite, out für Next.js statische Export).
  • “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen umgekehrten Domänen-Id, den Sie kontrollieren.
  • iOS-Build fehlschlägt nach Änderung der Bundle-ID — Die ID in Ihrem native Projekt muss mit Apple App Store Connect übereinstimmen. Finden und ersetzen Sie über ios/ und android/, commit, rebuild.
  • Weißer Bildschirm bei der Startanzeige — Set base: './' im Vite-Konfiguration, neu erstellen und ausführen npx cap sync.
  • Inhalt unter der Statusleiste — Fügen Sie viewport-fit=cover und env(safe-area-inset-top) Pufferhöhe (Schritt 13).
  • APK im Debug-Modus signieren — 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 Nativbau-Überprüfung und Live-Updates-Fehlertesten.

Zusammenfassung

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

Nächste 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 __CAPGO_KEEP_0__ verwenden Konvertieren Sie Ihre liebliche App in iOS und Android mit Capacitor um native Plugin-Arbeit zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ Plugin-Verzeichnis Capgo Plugin-Verzeichnis für den Produktworkflow Capgo Plugins von __CAPGO_KEEP_1__ Capacitor Plugins von Capgo für die Implementierungsdetails for the implementation detail in Capacitor Plugins by Capgo, Capgo Native Builds für den Produktworkflow und for the product workflow in Capgo Native Builds, and __CAPGO_KEEP_0__ für Cloud-IOS-Builds ohne Mac Von __CAPGO_KEEP_2__

Live-Updates für Capacitor-Anwendungen

Wenn ein Web-Schicht-Bug live ist, versenden Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung erteilt wird. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Überprüfungsprozess 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.