Passer à la navigation principale

Mise à jour de Capacitor 4 vers Capacitor 5 : Guide étape par étape

Découvrez comment mettre à jour votre projet de Capacitor 4 vers Capacitor 5 avec des changements de rupture minimaux, y compris la mise à jour des plugins officiels et des outils requis.

Crédits de l'article

Martin Donadieu

Auteur

Valeria

Réviseur

Jordan

Éditeur

Mise à jour de Capacitor 4 vers Capacitor 5 : Guide étape par étape

Par rapport aux mises à jour précédentes, la transition de Capacitor 4 à Capacitor 5 implique des changements de rupture minimaux. Ce guide fournit des instructions étape par étape pour mettre à jour votre projet vers Capacitor 5, ainsi qu'une liste des changements de rupture pour les plugins officiels.

Note: Capacitor 5 nécessite NodeJS 16 ou supérieur, car Node 12 a atteint la fin de vie et Node 14 atteindra la fin de vie le 30 avril 2023. Il est recommandé d'utiliser la dernière version LTS de NodeJS.

  1. Installez la latest version de la Capacitor CLI dans votre projet:

    npm i -D @capacitor/cli@latest
  2. Exécutez la commande suivante pour laisser la CLI gérer la migration:

    npx cap migrate

    Si les étapes de migration ne peuvent pas être réalisées, des informations supplémentaires seront fournies dans la sortie de la console. Les étapes de migration manuelles sont listées ci-dessous.

  3. Si vous avez l'extension VS Code installée, consultez la section recommandations de l'extension pour trouver l'option de migration de votre projet vers Capacitor 5.

Mettre à niveau un projet iOS de Capacitor 4 vers Capacitor 5

  1. Mettre à niveau Xcode: Capacitor 5 nécessite Xcode 14.1+.

  2. Mettre à jour .gitignore: Faites les modifications suivantes à votre .gitignore file:

    - App/Podfile.lock
    + App/output
  3. Mettez à jour les actifs pour utiliser une seule icône d'applicationcontext : Page/zone : Section d'exemples d'applications de la page de solution. Rôle : Texte d'alt de l'image. Voir dans : composants solutions/SolutionAppExample.astro. Message clé `solution_app_examples_icon_alt` (Texte d'alt d'icône d'exemples d'applications de la solution).

Upgrading Capacitor 4 Android Project to Capacitor 5

  1. Passer de __CAPGO_KEEP_0__ 4 à __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 nécessite Android Studio Flamingo | 2022.2.1 ou une version ultérieure en raison de l'utilisation de Gradle 8, qui nécessite Java JDK 17. Java 17 est livré avec Android Studio Flamingo, il n'est donc pas nécessaire de télécharger quoi que ce soit.Lancer l'assistant de mise à jour d'AGP Tools -> AGP Upgrade Assistant.

  3. : Android Studio peut vous aider avec certaines mises à jour liées à Gradle et au déplacement de packages dans les fichiers de construction. Pour commencer, exécutezMettre à jour les variables de projet Android variables.gradle : Dans votre fichier, mettez à jour vos valeurs pour les nouveaux minimums suivants :

    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. Mettre à jour Google Services:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Mettre à jour le plugin Gradle à 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. Mettre à jour le wrapper Gradle à 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. Désactiver Jetifier:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Déplacer le package à 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. Mettre à jour androidScheme: Dans Capacitor 6, https sera la configuration par défaut pour androidScheme pour les applications existantes afin de permettre mieux aux applications Capacitor d'utiliser la fonctionnalité Autofill du système. Pour éviter toute perte de données en raison de cette modification, définissez le schéma sur http maintenant, même si c'est la configuration par défaut actuelle.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Mettre à jour la version Kotlin: Si votre projet utilise Kotlin, mettez à jour le kotlin_version variable à '1.8.20'.

Changements de fonctionnalité des plugins

Les fonctionnalités suivantes des plugins ont été modifiées ou supprimées. Mettez à jour votre code en conséquence :

  • Feuille de dialogue
  • Navigateur
  • Appareil photo
  • Appareil
  • Localisation
  • Cartes de Google
  • Notifications locales
  • Notifications push
  • Barre de statut

Feuille de dialogue

  • Mettre à jour le androidxMaterialVersion variable à 1.8.0.

Navigateur

  • Mettre à jour le androidxBrowserVersion variable à 1.5.0.

Caméra

  • Pour Android 13, ajoutez la permission de lecture des images de médias (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>variable à AndroidManifest.xml.
  • Mettre à jour le androidxMaterialVersion variable à 1.8.0.
  • Mettre à jour le androidxExifInterfaceVersion variable à 1.3.6.

Appareil

Entitlements

  • Localisation playServicesLocationVersion Mettre à jour 21.0.1.

en

  • context: Mise à jour en temps réel - Page de produit. Rôle: Étiquette de navigation ou élément de l'interface utilisateur court. Clé de message `live_update_dynamic_label_to` (Étiquette dynamique de mise à jour en temps réel pour).
    • googleMapsPlayServicesVersion à 18.1.0.
    • googleMapsUtilsVersion à 3.4.0.
    • googleMapsKtxVersion à 3.4.0.
    • googleMapsUtilsKtxVersion à 3.4.0.
    • kotlinxCoroutinesVersion à 1.6.4.
    • androidxCoreKTXVersion à 1.10.0.
    • kotlin_version Notifications locales 1.8.20.

Pour Android 13, une nouvelle vérification de permission d'exécution est requise pour planifier les notifications locales lorsque vous ciblez __CAPGO_KEEP_0__ 33. Appelez

  • For Android 13, a new runtime permission check is required to schedule local notifications when targeting SDK 33. Call checkPermissions() par conséquent. requestPermissions() Notifications Push

selon

  • Pour Android 13, une nouvelle vérification de permission d'exécution est requise pour recevoir des notifications push lors de la cible SDK 33. Appel checkPermissions() et requestPermissions() Par conséquent.
  • Mettez à jour firebaseMessagingVersion la 23.1.2.

variable à

  • Barre d'état FADE.

By following these steps and updating your code accordingly, you should now have successfully updated your project from Capacitor 4 to Capacitor 5. Make sure to test your application thoroughly to ensure that all features and plugins are working as expected.

En suivant ces étapes et en mettant à jour votre Capacitor en conséquence, vous devriez maintenant avoir mis à jour avec succès votre projet de Capacitor 4 à __CAPGO_KEEP_2__ 5. Assurez-vous de tester votre application soigneusement pour vous assurer que toutes les fonctionnalités et les plugins fonctionnent comme prévu.

Continuez de Updating de __CAPGO_KEEP_0__ 4 à __CAPGO_KEEP_1__ 5 : Guide étape par étape Updating from Capacitor 4 to Capacitor 5: A Step-by-Step Guide Updating de __CAPGO_KEEP_0__ 4 à __CAPGO_KEEP_1__ 5 : Guide étape par étape pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, Ajout ou mise à jour de plugins pour le détail d'implémentation dans Ajout ou mise à jour de plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et Capgo Déploiements natifs pour le flux de travail du produit dans Capgo Déploiements natifs.

Mises à jour instantanées pour les applications Capacitor

Lorsqu'un bug de la couche web est actif, expédiez la correction par Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans la voie de revue normale.

Support humain de Martin

Démarrer maintenant

Dernières actualités de notre Blog

Capgo vous offre les meilleures informations dont vous avez besoin pour créer une application mobile véritablement professionnelle.