Passer à la navigation principale
Capacitor

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 minimaux, y compris la mise à jour des plugins officiels et des outils requis.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

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 migrer votre projet vers Capacitor 5.

Mettre à niveau le projet Capacitor 4 iOS vers Capacitor 5

  1. Mettre à jour 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. Mettre à jour les Actus pour utiliser un seul icône d'application: Xcode 14 prend en charge un seul icône d'application de 1024x1024. Nettoyez votre AppIcon.appiconset en supprimant toutes les tailles inutiles.

Mettre à niveau Capacitor 4 Projet Android vers Capacitor 5

  1. Mettre à niveau Android Studio: Capacitor 5 nécessite Android Studio Flamingo | 2022.2.1 ou une version plus récente 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 de plus.

  2. Démarrer l'Assistant de mise à niveau AGP: Android Studio peut aider avec certaines mises à jour liées à Gradle et au déplacement de packages dans les fichiers de construction. Pour commencer, exécutez Tools -> AGP Upgrade Assistant.

  3. Mettre à jour les variables du projet Android: Dans votre variables.gradle file, 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 les services Google:

    # 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 vers 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 vers 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 le schéma Android : : Dans __CAPGO_KEEP_0__ 6,: In Capacitor 6, https pour les applications existantes afin de mieux permettre aux applications __CAPGO_KEEP_0__ d'utiliser la fonctionnalité d'Autofill du système. Pour éviter toute perte de données résultant de cette modification, définissez le schéma sur androidScheme for existing apps to better enable Capacitor applications to use the system Autofill feature. To avoid data loss as a result of this change, set the scheme to http Mettre à jour la version Kotlin : : Si votre projet utilise Kotlin, mettez à jour la

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

Fonctionnalités de plugin modifiées

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

  • Feuille de tâches
  • Navigateur
  • Appareil photo
  • Appareil
  • Localisation
  • Cartes de Google
  • Notifications locales
  • Notifications Push
  • Barre de statut

Feuille de dialogue

  • Mettre à jour la androidxMaterialVersion variable à 1.8.0.

Navigateur

  • Mettre à jour la androidxBrowserVersion variable à 1.5.0.

Appareil photo

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

Appareil

  • Modifier DeviceId.uuid à DeviceId.identifier.
  • Sur iOS 16+, DeviceInfo.name renverra un nom d'appareil générique à moins que vous n'ajoutiez les entitlements appropriés.

Localisation

  • Mettre à jour le playServicesLocationVersion à 21.0.1.

Google Maps

  • Mettez à jour les variables suivantes :
    • 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 à 1.8.20.

Notifications locales

  • Pour Android 13, une nouvelle vérification de permission d'exécution est requise pour planifier les notifications locales lors de la cible SDK 33. Appelez checkPermissions() et requestPermissions() en conséquence.

Notifications Push

  • Pour Android 13, une nouvelle vérification de permission d'exécution est requise pour recevoir des notifications push lorsque vous ciblez SDK 33. Appeler checkPermissions() et requestPermissions() conformément.
  • Mettre à jour firebaseMessagingVersion la variable à 23.1.2.

Barre d'état

  • Sur iOS, l'animation de la barre d'état par défaut a été modifiée en FADE.

En suivant ces étapes et en mettant à jour votre code en conséquence, vous devriez maintenant avoir mis à jour avec succès votre projet à partir de Capacitor 4 vers Capacitor 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 la mise à jour de Updating from Capacitor 4 to Capacitor 5: Un guide étape par étape

Si vous utilisez Updating from Capacitor 4 to Capacitor 5: Un guide étape par étape pour planifier le travail de plugin natif, connectez-le avec Répertoire du Plugin Capgo pour le flux de travail du produit dans le Répertoire du Plugin Capgo, 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 Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins Entreprise Ionic, et Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, 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.

Commencez dès 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.