Saltare al contenuto principale
Capacitor

Aggiornamento da Capacitor 4 a Capacitor 5: una guida passo dopo passo

Scopri come aggiornare il tuo progetto da Capacitor 4 a Capacitor 5 con modifiche minimale, compresi gli aggiornamenti dei plugin ufficiali e degli strumenti richiesti.

Crediti dell'articolo

Martin Donadieu

Autore

Valeria

Valutatore

Giordano

Editore

Aggiornamento da Capacitor 4 a Capacitor 5: Guida passo dopo passo

Rispetto agli aggiornamenti precedenti, la transizione da Capacitor 4 a Capacitor 5 comporta pochi cambiamenti di rotta. Questa guida fornisce istruzioni passo dopo passo per aggiornare il tuo progetto a Capacitor 5, nonché una lista dei cambiamenti di rotta per i plugin ufficiali.

Nota: Capacitor 5 richiede NodeJS 16 o superiore, poiché Node 12 è giunto alla fine della vita e Node 14 raggiungerà la fine della vita il 30 aprile 2023. Si consiglia di utilizzare la versione LTS più recente di NodeJS.

  1. Installare la latest versione del Capacitor CLI nel tuo progetto:

    npm i -D @capacitor/cli@latest
  2. Eseguire il seguente comando per far gestire il CLI la migrazione:

    npx cap migrate

    Se alcune fasi di migrazione non possono essere eseguite, ulteriori informazioni saranno fornite nell'output del terminale. Le fasi di migrazione manuali sono elencate di seguito.

  3. Se hai installato l'estensione VS Code, controlla la sezione raccomandazioni dell'estensione per trovare l'opzione di migrare il tuo progetto a Capacitor 5.

Aggiornamento del progetto iOS Capacitor 4 a Capacitor 5

  1. Aggiorna Xcode: Capacitor 5 richiede Xcode 14.1+.

  2. Aggiorna .gitignore: Esegui le seguenti modifiche al tuo .gitignore file:

    - App/Podfile.lock
    + App/output
  3. Aggiorna Assets per utilizzare un'icona di app singolaRimuovi tutte le dimensioni non necessarie dal set di icone AppIcon.appiconset, poiché Xcode 14 supporta solo un'icona di app di 1024x1024.

Aggiornamento del progetto Android da Capacitor 4 a Capacitor 5

  1. Aggiorna 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.

  2. Esegui l'assistente di aggiornamento AGPEsegui Android Studio per effettuare alcune aggiornamenti relativi a Gradle e spostare i pacchetti nei file di build. Per iniziare, esegui Tools -> AGP Upgrade Assistant.

  3. Aggiorna le variabili del progetto Android: In tuo variables.gradle file, aggiorna i valori ai seguenti minimi nuovi:

    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. Aggiorna i servizi di Google:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Aggiorna il plugin Gradle a 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. Aggiorna il wrapper Gradle a 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. Disabilita Jetifier:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Sposta il pacchetto a 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. Aggiorna androidSchemeIn Capacitor 6. https sarà impostato per impostazione predefinita per androidScheme per le app esistenti per consentire meglio agli applicazioni Capacitor di utilizzare la funzione di riempimento automatico del sistema. Per evitare la perdita di dati a causa di questo cambiamento, impostare lo schema su http ora, anche se è la versione attuale predefinita.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Aggiorna la versione di Kotlin: Se il tuo progetto utilizza Kotlin, aggiorna il kotlin_version variabile a '1.8.20'.

Modifiche alle funzionalità dei plugin

I seguenti plugin hanno subito modifiche o sono stati eliminati. Aggiorna il tuo code di conseguenza:

  • Schermo di azione
  • Navigatore
  • Camera
  • Dispositivo
  • Geolocalizzazione
  • Mappa di Google
  • Notifiche locali
  • Notifiche push
  • Barra dello stato

Scheda di azione

  • Aggiorna il androidxMaterialVersion variabile a 1.8.0.

Browser

  • Aggiorna il androidxBrowserVersion variabile a 1.5.0.

Camera

  • Per Android 13, aggiungi la permessione di lettura delle immagini dei media (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>) AndroidManifest.xml.
  • Aggiorna il androidxMaterialVersion alla 1.8.0.
  • Aggiorna il androidxExifInterfaceVersion alla 1.3.6.

Dispositivo

  • Cambia DeviceId.uuid a DeviceId.identifier.
  • Nel caso di iOS 16+ DeviceInfo.name ritorna un nome dispositivo generico a meno che non aggiungi le autorizzazioni appropriate Geolocalizzazione.

Entità

  • Aggiorna il playServicesLocationVersion a 21.0.1.

Mappa di Google

  • Aggiorna le seguenti variabili:
    • googleMapsPlayServicesVersion a 18.1.0.
    • googleMapsUtilsVersion a 3.4.0.
    • googleMapsKtxVersion a 3.4.0.
    • googleMapsUtilsKtxVersion a 3.4.0.
    • kotlinxCoroutinesVersion a 1.6.4.
    • androidxCoreKTXVersion a 1.10.0.
    • kotlin_version a 1.8.20.

Notifiche locali

  • Per Android 13, è richiesta una nuova verifica di autorizzazione runtime per pianificare le notifiche locali quando si mira a SDK 33. checkPermissions() And requestPermissions() accordingly.

Notifiche Push

  • Per Android 13, è richiesta una nuova verifica di autorizzazione runtime per ricevere le notifiche push quando si mira a SDK 33. checkPermissions() And requestPermissions() accordingly.
  • Aggiorna il firebaseMessagingVersion Aggiornare il 23.1.2.

variabile a

  • La barra di stato predefinita di iOS ha cambiato l'animazione 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.

Keep going from Updating from Capacitor 4 to Capacitor 5: A Step-by-Step Guide

If sei stai utilizzando Aggiornamento da Capacitor 4 a Capacitor 5: una guida passo dopo passo per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow del prodotto nella Capgo Directory dei Plugin. Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento dei Plugin Sostituti dei Plugin Enterprise Ionic per il flusso di lavoro del prodotto nelle alternative del plugin Enterprise Ionic Capgo Costruzioni native per il workflow del prodotto in Capgo Costruzioni native.

Aggiornamenti istantanei per le app Capacitor

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.

Sostegno umano da parte di Martin

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.