Passer directement au contenu principal
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

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.

Remarque: 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 Capacitor CLI dans votre projet :

    npm i -D @capacitor/cli@latest
  2. Exécutez la commande suivante pour que le CLI gère 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 à jour Capacitor 4 Projet iOS vers Capacitor 5

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

  2. Mettre à jour .gitignore: Apportez les modifications suivantes à votre .gitignore fichier :

    - App/Podfile.lock
    + App/output
  3. Mettre à jour les Assets 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 à jour Capacitor 4 Projet Android vers Capacitor 5

  1. Mettre à jour 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 des fichiers supplémentaires.

  2. Démarrer l'Assistant de mise à niveau AGP: Android Studio peut aider avec certaines mises à jour liées à Gradle et le 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 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 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 vers 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 androidScheme pour les applications existantes pour mieux permettre 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 valeur par défaut actuelle.

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

Changements de fonctionnalité du plugin

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

  • Feuille de dialogue d'action
  • Navigateur
  • Appareil photo
  • Appareil
  • Localisation géographique
  • Google Maps
  • Notifications locales
  • Notifications push
  • Barre de statut

Feuille d'action

  • Mettre à jour le androidxMaterialVersion variable à 1.8.0.

Navigateur

  • Mettre à jour le 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"/>sur iOS 16+ AndroidManifest.xml.
  • Mettre à jour androidxMaterialVersion la variable à 1.8.0.
  • Mettre à jour androidxExifInterfaceVersion la variable à 1.3.6.

Appareil

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

Geolocalisation

  • Mettre à jour le playServicesLocationVersion à 21.0.1.

Google Maps

  • Mettre à 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 des notifications locales lorsque vous ciblez SDK 33. Appel checkPermissions() et requestPermissions() conformément.

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. Appel checkPermissions() et requestPermissions() conformément.
  • Mise à jour la firebaseMessagingVersion 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 depuis 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 à mettre à jour depuis Capacitor 4 vers Capacitor 5 : Guide étape par étape

Si vous utilisez Mettez à jour depuis Capacitor 4 vers Capacitor 5 : Guide étape par étape pour planifier le travail de plugin natif, connectez-le à Répertoire de plugin Capgo pour le flux de travail du produit dans Répertoire de plugin Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou Mettre à jour les plugins pour les détails d'implémentation dans Ajouter ou Mettre à jour les plugins, Alternatives de plugins Enterprise Ionic pour le flux de travail du produit dans Alternatives de plugins Enterprise Ionic, et Capgo Déploiements natifs pour le flux de travail du produit dans Capgo Déploiements natifs.

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Push Notifications

Notifications pushées

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