Mettre à jour de Capacitor 4 à Capacitor 5 : Guide étape par étape

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

Apprenez à mettre à jour votre projet de Capacitor 4 vers Capacitor 5 avec des modifications mineures, 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

En comparaison des mises à jour précédentes, la transition de Capacitor 4 vers 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.

Installez la latest version de Capacitor CLI dans votre projet :
```
npm i -D @capacitor/cli@latest
```
Exécutez la commande suivante pour que CLI gère la migration :
```
npx cap migrate
```
Si certaines étapes de migration ne peuvent pas être effectuées, des informations supplémentaires seront fournies dans la sortie du terminal. Les étapes de migration manuelles sont listées ci-dessous.
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 à jour un projet iOS Capacitor 4 vers Capacitor 5

Mettre à niveau Xcode: Capacitor 5 nécessite Xcode 14.1+.
Mettre à jour .gitignore: Apportez les modifications suivantes à votre .gitignore fichier :
```
- App/Podfile.lock
+ App/output
```
Update Assets to use a single app icon: Xcode 14 supporte une seule icône d'application de 1024x1024. Nettoyez votre ensemble d'icônes AppIcon en supprimant toutes les tailles inutiles.

Mise à jour d'un projet Android Capacitor 4 vers Capacitor 5

Mise à jour d'Android Studio: 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.
Exécutez l'assistant de mise à niveau AGP: Android Studio peut vous aider avec certaines mises à jour liées à Gradle et le déplacement de packages dans les fichiers de build. Pour commencer, exécutez Tools -> AGP Upgrade Assistant.

Mise à jour des variables de projet Android : Dans votre variables.gradle 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'

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'
}

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'
}

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

Désactiver Jetifier:

# gradle.properties
android.useAndroidX=true
- android.enableJetifier=true

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

Mettre à jour androidScheme : À partir de Capacitor 6, https sera la configuration par défaut pour androidScheme pour les applications existantes afin de mieux permettre aux applications Capacitor 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 http maintenant, même si c'est la version par défaut actuelle.
```
{
  server: {
    androidScheme: "http"
  }
}
```
Mise à jour de la version KotlinSi votre projet utilise Kotlin, mettez à jour la kotlin_version variable à '1.8.20'.

Changements de fonctionnalités des plugins

La fonctionnalité suivante du plugin a été modifiée ou supprimée. Mettez à jour votre code en conséquence.

Feuille de route
Navigateur
Caméra
Appareil
Localisation
Cartes de Google
Notifications locales
Notifications push
Barre de statut

Feuille d'action

Mettre à jour le androidxMaterialVersion la variable à 1.8.0.

Navigateur

Mettre à jour le androidxBrowserVersion la 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"/>] AndroidManifest.xml.
Mettre à jour la androidxMaterialVersion la variable à 1.8.0.
Mettre à jour la androidxExifInterfaceVersion la variable à 1.3.6.

Appareil

Changer DeviceId.uuid à DeviceId.identifier.
Sur iOS 16+, DeviceInfo.name retournera un nom d'appareil générique à moins que vous n'ajoutiez les autorisations appropriées Localisation.

Geolocalisation

Mettre à jour la 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, un nouveau contrôle de permission d'exécution est requis pour planifier les notifications locales lors de la cible SDK 33. checkPermissions() et requestPermissions() en conséquence.

Notifications Push

Pour Android 13, un nouveau contrôle de permission d'exécution est requis pour recevoir les notifications push lors de la cible SDK 33. checkPermissions() et requestPermissions() en conséquence.
Mettre à jour le 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 votre projet avec succès de Capacitor 4 à 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 Updating de Capacitor 4 à Capacitor 5 : Guide étape par étape

Si vous utilisez Mise à jour de Capacitor 4 vers Capacitor 5 : Guide étape par étape pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Ajouter ou mettre à jour des plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives Ionic Enterprise Plugin Capgo Bâtiments natifs pour le flux de travail du produit dans les Capgo Builds natifs.