Zum Hauptinhalt springen
Capacitor

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

Erhalten Sie eine Schritt-für-Schritt-Anleitung, um Ihr Projekt von Capacitor 4 auf Capacitor 5 mit minimalen Bruchstellen zu aktualisieren, einschließlich der Aktualisierung von offiziellen Plugins und erforderlichen Tools.

Martin Donadieu

Martin Donadieu

Content-Marketing-Spezialist

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

Im Vergleich zu vorherigen Updates beinhaltet die Übergabe von Capacitor 4 auf Capacitor 5 minimalen Bruchstellen. Diese Anleitung bietet Schritt-für-Schritt-Anweisungen zur Aktualisierung 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 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 das latest Version 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 übernehmen:

    npx cap migrate

    Wenn bei den Migrationsschritten Probleme auftreten, werden weitere 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.

Capacitor 4 iOS-Projekt auf Capacitor 5 upgraden

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

  2. .gitignore aktualisieren: Führen Sie die folgenden Änderungen an Ihrem .gitignore Datei:

    - App/Podfile.lock
    + App/output
  3. Assets aktualisieren, um ein einzelnes App-Icon zu verwendenKontext: Seite/Bereich: Lösungsseite App-Beispiele. Rolle: Bildbeschreibungstext. Gesehen in: Komponente Lösung/Beispiel für Lösungsanwendung. Nachrichtenschlüssel `solution_app_examples_icon_alt` (Lösungsanwendungs-Beispiel-Icon-Beschreibung). : Xcode 14 unterstützt ein einzelnes App-Icon der Größe 1024x1024. Reinigen Sie Ihre AppIcon.appiconset, indem Sie alle überflüssigen Größen entfernen.

Capacitor 4 Android-Projekt auf Capacitor 5 aktualisieren

  1. Android Studio aktualisieren: 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 keine zusätzlichen Downloads erforderlich.

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

  3. Android-Projekt-Variablen aktualisieren: 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. 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. Package umziehen 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. Android-Scheme aktualisieren: In Capacitor 6, https wird die Einstellung nun Standard sein für androidScheme 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, selbst wenn es die aktuelle Standard-Einstellung ist.

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

Änderungen in der Plugin-Funktionalität

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

  • Action Sheet
  • Browser
  • Kamera
  • Gerät
  • Ortung
  • Google Maps
  • Lokale Benachrichtigungen
  • Push-Benachrichtigungen
  • Statusleiste

Aktionstabelle

  • aktualisieren Sie die androidxMaterialVersion Variablen auf 1.8.0.

Browser

  • aktualisieren Sie die androidxBrowserVersion zu 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"/>) in AndroidManifest.xml.
  • aktualisieren Sie die androidxMaterialVersion zu 1.8.0.
  • aktualisieren Sie die androidxExifInterfaceVersion zu 1.3.6.

Gerät

  • Ändern DeviceId.uuid zu DeviceId.identifier.
  • Auf iOS 16+, DeviceInfo.name wird eine allgemeine Gerätenamen zurückgegeben, es sei denn, Sie fügen die entsprechenden Zugriffsrechte hinzu.

Geolocation

  • Aktualisieren Sie das 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 SDK 33 angepeilt wird. Ruf checkPermissions() und requestPermissions() entsprechend.

Push-Benachrichtigungen

  • Für Android 13 ist eine neue Laufzeitberechtigungsprüfung erforderlich, um Push-Benachrichtigungen zu empfangen, wenn SDK 33 angepeilt wird. Ruf checkPermissions() und requestPermissions() entsprechend.
  • Aktualisieren firebaseMessagingVersion variable zu 23.1.2.

Statusleiste

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

Indem Sie diese Schritte befolgen und Ihr code entsprechend aktualisieren, sollten Sie jetzt 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.

Fortsetzen von Aktualisierung von Capacitor 4 auf Capacitor 5: Eine Schritt-für-Schritt-Anleitung

Wenn Sie __CAPGO_KEEP_0__ verwenden Aktualisierung 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 Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionische Unternehmens-Plugin-Alternativen für das Produktworkflow in Ionische Unternehmens-Plugin-Alternativen, und Capgo Native Builds für das Produktworkflow in Capgo Native Builds.

Live Updates für Capacitor-Apps

Wenn ein Fehler im Web-Schicht lebt, schicken Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung genehmigt ist. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Menschliche Unterstützung von Martin

Los geht's jetzt

Neueste von unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles Mobiltelefon-App zu erstellen.