Pular al contenido principal
Capacitor

Actualizando desde Capacitor 4 a Capacitor 5: Una Guía Paso a Paso

Aprenda a actualizar su proyecto desde Capacitor 4 a Capacitor 5 con cambios mínimos, incluyendo la actualización de plugins oficiales y herramientas requeridas.

Martin Donadieu

Martin Donadieu

Marketing de Contenido

Actualizando desde Capacitor 4 a Capacitor 5: Una Guía Paso a Paso

En comparación con las actualizaciones anteriores, la transición desde Capacitor 4 a Capacitor 5 implica cambios de ruptura mínimos. Esta guía proporciona instrucciones paso a paso para actualizar su proyecto a Capacitor 5, así como una lista de cambios de ruptura para plugins oficiales.

Nota: Capacitor 5 requiere NodeJS 16 o superior, ya que Node 12 ha alcanzado el fin de vida y Node 14 alcanzará el fin de vida el 30 de abril de 2023. Se recomienda utilizar la versión LTS más reciente de NodeJS.

  1. Instale la latest versión de la Capacitor CLI en su proyecto:

    npm i -D @capacitor/cli@latest
  2. Ejecute el siguiente comando para que la CLI maneje la migración:

    npx cap migrate

    Si cualquier paso de migración no puede ser realizado, se proporcionará información adicional en la salida del terminal. Los pasos de migración manuales se enumeran a continuación.

  3. Si tiene instalado la extensión de VS Code, consulte la sección de recomendaciones de la extensión para encontrar la opción de migrar su proyecto a Capacitor 5.

Actualizando Capacitor 4 a proyecto de iOS a Capacitor 5

  1. Actualizar Xcode: Capacitor 5 requiere Xcode 14.1+.

  2. Actualizar .gitignore: Haga los siguientes cambios en su .gitignore archivo:

    - App/Podfile.lock
    + App/output
  3. Actualizar Assets para utilizar un icono de aplicación único: Xcode 14 admite un icono de aplicación único de 1024x1024. Limpie su AppIcon.appiconset eliminando todas las tamaños innecesarios.

Actualizando Capacitor 4 a proyecto de Android a Capacitor 5

  1. Actualizar Android Studio: Capacitor 5 requiere Android Studio Flamingo | 2022.2.1 o una versión más nueva debido al uso de Gradle 8, que requiere Java JDK 17. Java 17 viene con Android Studio Flamingo, por lo que no es necesario descargar nada adicional.

  2. Ejecutar Asistente de actualización de AGP: Android Studio puede ayudar con algunas actualizaciones relacionadas con Gradle y mover paquetes a archivos de compilación. Para empezar, ejecute Tools -> AGP Upgrade Assistant.

  3. Actualizar variables del proyecto Android: En su variables.gradle archivo, actualice sus valores a los siguientes nuevos mínimos:

    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. Actualizar servicios de Google:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Actualizar plugin de 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. Actualizar wrapper de 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. Deshabilitar Jetifier:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Mover paquete 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. Actualizar esquema de Android: En Capacitor 6, https será el ajuste predeterminado para androidScheme para aplicaciones existentes para mejorar la capacidad de Capacitor de aplicaciones de utilizar la característica de relleno automático del sistema. Para evitar la pérdida de datos como resultado de este cambio, establezca el esquema a http ahora, incluso si es el valor predeterminado actual.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Actualizar versión de Kotlin: Si su proyecto utiliza Kotlin, actualice el kotlin_version variable a '1.8.20'.

Cambios en la funcionalidad del plugin

La siguiente funcionalidad del plugin ha sido modificada o eliminada. Actualice su code según corresponda:

  • Ventana de acción
  • Navegador
  • Cámara
  • Dispositivo
  • Ubicación geográfica
  • Google Maps
  • Notificaciones locales
  • Notificaciones de empuje
  • Barra de estado

Hoja de acción

  • Actualice el androidxMaterialVersion variable a 1.8.0.

Navegador

  • Actualice el androidxBrowserVersion variable a 1.5.0.

Cámara

  • Para Android 13, agregue la permiso de lectura de imágenes de medios (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>en el dispositivo AndroidManifest.xml.
  • Actualizar androidxMaterialVersion actualiza la variable a 1.8.0.
  • Actualizar androidxExifInterfaceVersion actualiza la variable a 1.3.6.

Dispositivo

  • Cambiar a DeviceId.uuid en DeviceId.identifier.
  • En iOS 16+, DeviceInfo.name devolverá un nombre de dispositivo genérico a menos que agregue los permisos adecuados Permisos.

Ubicación geográfica

  • Actualice el playServicesLocationVersion a 21.0.1.

Google Maps

  • Actualice las siguientes variables:
    • 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.

Notificaciones locales

  • Para Android 13, se requiere una nueva comprobación de permiso de ejecución para programar notificaciones locales cuando se dirija a SDK 33. Llamada checkPermissions() y requestPermissions() según.

Notificaciones Push

  • Para Android 13, se requiere una nueva comprobación de permiso de ejecución para recibir notificaciones push cuando se dirija a SDK 33. Llamada checkPermissions() y requestPermissions() según.
  • Actualice el firebaseMessagingVersion variable a 23.1.2.

Barra de Estado

  • En iOS, la animación de barra de estado predeterminada ha cambiado a FADE.

Siguiendo estos pasos y actualizando su code según corresponda, debería tener actualizado ahora su proyecto desde Capacitor 4 a Capacitor 5. Asegúrese de probar su aplicación exhaustivamente para asegurarse de que todas las características y plugins funcionen como se espera.

Sigue adelante desde Actualizar desde Capacitor 4 a Capacitor 5: Una Guía Paso a Paso

Si estás utilizando Actualizando desde Capacitor 4 a Capacitor 5: Una Guía Paso a Paso para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.

Actualizaciones en vivo para Capacitor aplicaciones

Cuando un error de capa web está activo, envía la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen en el camino de revisión normal.

Comienza ahora

Últimas noticias de nuestro Blog

Capgo te brinda las mejores perspectivas que necesitas para crear una aplicación móvil verdaderamente profesional.