Zum Hauptinhalt springen
Capacitor

Aktualisierung von Capacitor 4 auf Capacitor 5: Ein Schritt-für-Schritt-Leitfaden

Lernen Sie, wie Sie Ihr Projekt von Capacitor 4 auf Capacitor 5 mit minimalen Änderungen aktualisieren, einschließlich der Aktualisierung von offiziellen Plugins und erforderlichen Werkzeugen.

Artikelcredits

Martin Donadieu

Schreiber

Valeria

Rezensent

Jordan

Redakteur

Update von Capacitor 4 auf Capacitor 5: Ein Schritt-für-Schritt-Leitfaden

Im Vergleich zu vorherigen Updates beinhalten die Übergänge von Capacitor 4 auf Capacitor 5 nur minimale Bruchstellen. Diese Anleitung bietet Schritt-für-Schritt-Anweisungen zum Aktualisieren Ihres Projekts auf Capacitor 5 sowie eine Liste der Bruchstellen für offizielle Plugins.

Hinweis: Capacitor 5 erfordert NodeJS 16 oder höher, da Node 12 aus dem Support genommen wurde und Node 14 am 30. April 2023 aus dem Support genommen wird. Es wird empfohlen, die neueste LTS-Version von NodeJS zu verwenden.

  1. Installiere das latest Version von Capacitor CLI in Ihrem Projekt:

    npm i -D @capacitor/cli@latest
  2. Führen Sie den folgenden Befehl aus, um die CLI die Migration zu übernehmen:

    npx cap migrate

    Wenn bei den Migrationsschritten nicht alle Schritte erreicht werden können, werden weitere Informationen im Terminaloutput bereitgestellt. Die manuellen Migrationsschritte sind unten aufgeführt.

  3. Wenn Sie die VS Code-Erweiterung installiert haben, überprüfen Sie die Empfehlungen in der Erweiterung, um die Option zu finden, Ihr Projekt auf Capacitor 5 zu migrieren.

Das Upgrade von Capacitor 4 auf iOS auf Capacitor 5

  1. Upgrade Xcode: Capacitor 5 erfordert Xcode 14.1+.

  2. Aktualisieren Sie .gitignore: Führen Sie folgende Änderungen an Ihrem .gitignore Datei:

    - App/Podfile.lock
    + App/output
  3. Update Assets, um ein einzelnes App-Icon zu verwendenEntfernen Sie alle überflüssigen Größen aus Ihrer AppIcon.appiconset, da Xcode 14 nur eine einzelne App-Icon-Größe von 1024x1024 unterstützt.

Aktualisierung von Capacitor 4 Android-Projekt auf Capacitor 5

  1. Upgrade von __CAPGO_KEEP_0__ 4 Android-Projekt zu __CAPGO_KEEP_1__ 5: Capacitor 5 requires Android Studio Flamingo | 2022.2.1 or newer due to the usage of Gradle 8, which requires Java JDK 17. Java 17 ships with Android Studio Flamingo, so no additional downloads are needed.

  2. Lauf Assistent für AGP-AktualisierungMit Android Studio können einige Updates zu Gradle und dem Verschieben von Paketen in Build-Dateien unterstützt werden. Um zu beginnen, führen Sie Tools -> AGP Upgrade Assistant.

  3. Aktualisieren Sie die Android-Projektvariablen: In Ihrem variables.gradle Datei aktualisieren Sie Ihre Werte auf die folgenden neuen Mindestwerte:

    minSdkVersion = 22
    compileSdkVersion = 33
    targetSdkVersion = 33
    androidxActivityVersion = '1.7.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
    androidxCoreVersion = '1.10.0'
    androidxFragmentVersion = '1.5.6'
    coreSplashScreenVersion = '1.0.0'
    androidxWebkitVersion = '1.6.1'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
    cordovaAndroidVersion = '10.1.1'
  4. Aktualisieren Sie Google Services:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Aktualisieren Sie den Gradle-Plugin auf 8.0.0:

    # build.gradle
    dependencies {
    -       classpath 'com.android.tools.build:gradle:7.2.1'
    +       classpath 'com.android.tools.build:gradle:8.0.0'
    }
  6. Aktualisieren Sie den Gradle-Wrapper auf 8.0.2:

    # gradle-wrapper.properties
    distributionBase=GRADLE_USER_HOME
    distributionPath=wrapper/dists
    - distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
    + distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
    zipStoreBase=GRADLE_USER_HOME
    zipStorePath=wrapper/dists
  7. Deaktivieren Sie Jetifier:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Verschieben Sie das Paket auf build.gradle:

    # AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    - <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    -     package="[YOUR_PACKAGE_ID]">
    + <manifest xmlns:android="http://schemas.android.com/apk/res/android">
    # build.gradle
    android {
    +     namespace "[YOUR_PACKAGE_ID]"
          compileSdkVersion rootProject.ext.compileSdkVersion
  9. Aktualisieren Sie androidScheme: In Capacitor 6, https wird die Standard-Einstellung für androidScheme für bestehende Apps, um die Verwendung des System-Autofill-Funktion durch Capacitor-Anwendungen zu ermöglichen. Um Datenverlust zu vermeiden, setzen Sie den Scheme auf http jetzt, selbst wenn es der aktuelle Standard ist.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Kotlin-Version aktualisierenWenn Ihr Projekt Kotlin verwendet, aktualisieren Sie die kotlin_version variable zu '1.8.20'.

Änderungen in der Plugin-Funktionalität

Die folgende Plugin-Funktionalität wurde geändert oder entfernt. Aktualisieren Sie Ihren code entsprechend:

  • Aktionsschaltfläche
  • Browser
  • Kamera
  • Gerät
  • Standort
  • Google Maps
  • Benachrichtigungen
  • Push-Benachrichtigungen
  • Statusleiste

Aktionstabelle

  • Aktualisieren Sie androidxMaterialVersion Variablen auf 1.8.0.

Browser

  • Aktualisieren Sie androidxBrowserVersion Variablen auf 1.5.0.

Kamera

  • Für Android 13 fügen Sie die Berechtigung zum Lesen von Medienbildern hinzu ("<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>] AndroidManifest.xml.
  • Aktualisieren Sie androidxMaterialVersion Variable auf 1.8.0.
  • Aktualisieren Sie androidxExifInterfaceVersion Variable auf 1.3.6.

Gerät

  • Ändern Sie DeviceId.uuid auf DeviceId.identifier.
  • Auf iOS 16+ DeviceInfo.name wird eine allgemeine Gerätenamen zurückgeben, es sei denn, Sie fügen den entsprechenden Geolocation.

Zugriffsrechte

  • Aktualisieren Sie playServicesLocationVersion zu 21.0.1.

Google Maps

  • Aktualisieren Sie die folgenden Variablen:
    • googleMapsPlayServicesVersion zu 18.1.0.
    • googleMapsUtilsVersion zu 3.4.0.
    • googleMapsKtxVersion zu 3.4.0.
    • googleMapsUtilsKtxVersion zu 3.4.0.
    • kotlinxCoroutinesVersion zu 1.6.4.
    • androidxCoreKTXVersion zu 1.10.0.
    • kotlin_version zu 1.8.20.

Benachrichtigungen

  • Für Android 13 ist eine neue Laufzeitberechtigungsprüfung erforderlich, um lokale Benachrichtigungen zu planen, wenn Sie sich auf SDK 33 richten. checkPermissions() und requestPermissions() entsprechend.

Push-Benachrichtigungen

  • Für Android 13 ist eine neue Laufzeitberechtigungsprüfung erforderlich, um Push-Benachrichtigungen zu erhalten, wenn Sie sich auf SDK 33 richten. Aufrufen Sie checkPermissions() und requestPermissions() entsprechend.
  • Aktualisieren Sie firebaseMessagingVersion Variablen auf 23.1.2.

Statusleiste

  • Bei iOS wurde die Standardanimation der Statusleiste geändert in FADE.

Indem Sie diese Schritte befolgen und Ihre code entsprechend aktualisieren, sollten Sie jetzt erfolgreich Ihre Projekt von Capacitor 4 auf Capacitor 5 aktualisiert haben. Stellen Sie sicher, dass Sie Ihre Anwendung gründlich testen, um sicherzustellen, dass alle Funktionen und Plugins wie erwartet funktionieren.

Weitergehen von Updating von Capacitor 4 auf Capacitor 5: Eine Schritt-für-Schritt-Anleitung

Wenn Sie __CAPGO_KEEP_0__ verwenden Aktualisierung von Capacitor 4 zu Capacitor 5: Ein Schritt-für-Schritt-Leitfaden um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo nativee Native Builds für den Produktworkflow in Capgo Native Builds.

Live-Updates für Capacitor-Apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Unterstützung durch Menschen von Martin

Get Started Now

Neueste aus unserem Blog

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