Zum Hauptinhalt springen
Capacitor

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

Erfahren Sie, wie Sie Ihr Projekt von Capacitor 4 auf Capacitor 5 mit minimalen Bruchstellen aktualisieren können, einschließlich der Aktualisierung von offiziellen Plugins und erforderlichen Werkzeugen.

Martin Donadieu

Martin Donadieu

Content-Marketing-Beauftragter

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

Compared to previous updates, the transition from Capacitor 4 to Capacitor 5 involves minimal breaking changes. This guide provides step-by-step instructions for updating your project to Capacitor 5, as well as a list of breaking changes for official plugins.

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

  1. Installieren Sie die latest Version von der Capacitor CLI in Ihrem Projekt:

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

    npx cap migrate

    Wenn keine Migrationsschritte erreicht werden können, wird zusätzliche Informationen im Terminalausgabe bereitgestellt. Manuelle 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 iOS-Projekt zu Capacitor 5

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

  2. Aktualisieren Sie .gitignore: Änderungen wie folgende vornehmen: .gitignore datei:

    - App/Podfile.lock
    + App/output
  3. Update Assets, um ein einzelnes App-Icon zu verwenden: Xcode 14 unterstützt ein einzelnes App-Icon von 1024x1024. Stellen Sie sicher, dass Ihre AppIcon.appiconset nur die notwendigen Größen enthält.

Upgraden Sie Capacitor 4 Android-Projekt zu Capacitor 5

  1. Upgrade Android Studio: Capacitor 5 erfordert Android Studio Flamingo | 2022.2.1 oder neuer, da aufgrund der Verwendung von Gradle 8 Java JDK 17 erforderlich ist. Java 17 ist in Android Studio Flamingo enthalten, daher sind zusätzliche Downloads nicht erforderlich.

  2. AGP Upgrade Assistant ausführen: Android Studio kann bei einigen Updates im Zusammenhang mit Gradle und dem Verschieben von Paketen in Build-Dateien helfen. Um zu beginnen, führen Sie Tools -> AGP Upgrade Assistant.

  3. Update Android-Projektvariablen: In Ihrer 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. Google Services aktualisieren:

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

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

    # 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. Jetifier deaktivieren:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Paket in 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. Android-Scheme aktualisieren: In Capacitor 6, https werden die Standard-Einstellungen für androidScheme bestehenden Apps, um Capacitor-Anwendungen besser die Nutzung des System-Autofill-Funktionen zu ermöglichen. Um Datenverlust zu vermeiden, der durch diese Änderung entsteht, setzen Sie den Scheme auf http jetzt, auch wenn es derzeit die aktuelle Standard-Einstellung ist.

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

Änderungen in der Pluginfunktion

Die folgende Pluginfunktion wurde geändert oder entfernt. Aktualisieren Sie Ihre code entsprechend:

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

Aktionsschaltfläche

  • Aktualisieren Sie das androidxMaterialVersion Variablenwert auf 1.8.0.

Browser

  • Aktualisieren Sie das androidxBrowserVersion Variablenwert auf 1.5.0.

Kamera

  • Für Android 13 fügen Sie die Leseberechtigung für Medienbilder (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>) in AndroidManifest.xml.
  • Aktualisieren Sie das androidxMaterialVersion Variablenwert auf 1.8.0.
  • Aktualisieren Sie das androidxExifInterfaceVersion Variablen zu 1.3.6.

Gerät

  • Ändern DeviceId.uuid zu DeviceId.identifier.
  • Bei iOS 16+ DeviceInfo.name wird ein generischer Gerätename zurückgegeben, es sei denn, Sie fügen die entsprechenden Zugriffsrechte.

Standort

  • 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.

Lokale Benachrichtigungen

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

Push-Benachrichtigungen

  • Für Android 13 ist ein neuer Laufzeitberechtigungsprüfung erforderlich, um Push-Benachrichtigungen zu erhalten, wenn SDK 33. Call checkPermissions() und requestPermissions() entsprechend.
  • Aktualisieren Sie das firebaseMessagingVersion Variablen zu 23.1.2.

Statusleiste

  • Auf iOS wurde die Standard-Statusleiste-Animation geändert in FADE.

Durch die Ausführung dieser Schritte und die Aktualisierung Ihres code entsprechend, sollten Sie jetzt erfolgreich Ihre Projekt von Capacitor 4 zu Capacitor 5 aktualisiert haben. Stellen Sie sicher, dass Sie Ihre Anwendung gründlich testen, um sicherzustellen, dass alle Funktionen und Plugins wie erwartet funktionieren.

Fortsetzen Sie mit dem Update von Updating von Capacitor 4 zu Capacitor 5: Ein Schritt-für-Schritt-Leitfaden

Wenn Sie Updating von Capacitor 4 zu Capacitor 5: Ein Schritt-für-Schritt-Leitfaden für die Planung von native Plugin-Arbeit verwenden, verbinden Sie es mit Plugin-Verzeichnis von Capgo für den Produktworkflow in Plugin-Verzeichnis von Capgo 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 Alternativen zu Ionic Enterprise Plugins für den Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Nativbau von Capgo für den Produktworkflow in Nativbau von Capgo

Echtzeit-Updates für Capacitor-Anwendungen

Wenn ein Fehler im Web-Schicht lebt, liefern Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung vorliegt. Die Benutzer erhalten das Update im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Los geht's

Neuestes aus unserem Blog

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