Zum Hauptinhalt springen
Capacitor

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

Erhalten Sie Informationen, wie Sie Ihr Projekt von Capacitor 4 auf Capacitor 5 aktualisieren können, wobei minimalen Bruchstellen vorgebeugt wird, einschließlich der Aktualisierung von offiziellen Plugins und erforderlichen Tools.

Artikelcredits

Martin Donadieu

Autoren

Valeria

Rezensent

Jordan

Redakteur

Capacitor 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 bereits aus dem Support herausgenommen wurde und Node 14 am 30. April 2023 aus dem Support herausgenommen wird. Es wird empfohlen, die neueste LTS-Version von NodeJS zu verwenden.

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

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

    npx cap migrate

    Wenn nicht alle Migrationsschritte erreicht werden können, wird zusätzliche Informationen im Terminaloutput 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 zu Capacitor 5 zu migrieren.

Das Upgrade von Capacitor 4 iOS-Projekt zu Capacitor 5

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

  2. Update .gitignore: Machen Sie folgende Änderungen an Ihrem .gitignore Datei:

    - App/Podfile.lock
    + App/output
  3. Update Assets verwenden Sie ein einzelnes App-IconKontext: Seite/Bereich: Lösungsseite App-Beispielabschnitt. Rolle: Bildbeschreibungstext. Gesehen in: Komponentenlösungen/SolutionAppExample.astro. Nachrichtenschlüssel `solution_app_examples_icon_alt` (Lösungs-App-Beispiel-Bildbeschreibungstext).

Upgrading Capacitor 4 Android Project to 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. : __CAPGO_KEEP_0__ 5 erfordert Android Studio Flamingo | 2022.2.1 oder neuer aufgrund der Verwendung von Gradle 8, das Java JDK 17 erfordert. Java 17 ist in Android Studio Flamingo enthalten, daher sind keine zusätzlichen Downloads erforderlich.AGP Upgrade Assistant ausführen Tools -> AGP Upgrade Assistant.

  3. : Android Studio kann Ihnen bei einigen Updates helfen, die mit Gradle und dem Verschieben von Paketen in Build-Dateien zusammenhängen. Um zu beginnen, führen SieUpdate von Android-Projektvariablen variables.gradle : In Ihrer 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 zu 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 für bestehende 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 Standard-Einstellung ist.

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

Änderungen in der Pluginfunktionalität

Die folgende Pluginfunktionalität wurde geändert oder entfernt. Aktualisieren Sie code entsprechend:

  • Aussageblatt
  • 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 hinzu (<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 variable zu 1.3.6.

Gerät

Zugriffsberechtigungen

  • Standort playServicesLocationVersion aktualisieren 21.0.1.

context: Produktseite für Live-Updates. Rolle: Kurzer Benutzerschnittstelle-Label oder Navigationselement. Nachrichtenschlüssel `live_update_dynamic_label_to` (Live-Update-Dynamischer Label zu).

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

Für Android 13 ist eine neue Laufzeitberechtigung überprüfung erforderlich, um lokale Benachrichtigungen zu planen, wenn Sie sich auf __CAPGO_KEEP_0__ 33 richten. Aufrufen

  • For Android 13, a new runtime permission check is required to schedule local notifications when targeting SDK 33. Call checkPermissions() entsprechend. requestPermissions() Benachrichtigungen

zurück zur Oberfläche

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

Statusleiste

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

Durch die Ausführung dieser Schritte und die Aktualisierung Ihres code entsprechend sollten Sie nun erfolgreich Ihr 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.

Fahren Sie mit dem Update von Capacitor 4 auf Capacitor 5: Eine Schritt-für-Schritt-Anleitung

Wenn Sie __CAPGO_KEEP_0__ 4 verwenden Update von Capacitor 4 auf Capacitor 5: Eine Schritt-für-Schritt-Anleitung um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo, Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins, Ionische Unternehmens-Plugin-Alternativen zur Produktionsablauf in Ionische Unternehmens-Plugin-Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.

Live-Updates für Capacitor-Apps

Wenn ein Bug im Weblayer live ist, schicken 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 Review-Prozess bleiben.

Unterstützung durch Martin

Los geht's jetzt

Neueste von unserem Blog

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