Pasar al contenido principal
Capacitor

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

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

Martin Donadieu

Martin Donadieu

Gerente de Contenido

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

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

Nota: Capacitor 5 requires NodeJS 16 or higher, as Node 12 has reached end-of-life and Node 14 will reach end-of-life on April 30th, 2023. It is recommended to use the latest LTS version of NodeJS.

  1. Instale el latest versión del Capacitor CLI en tu proyecto:

    npm i -D @capacitor/cli@latest
  2. Ejecuta el siguiente comando para que el CLI se encargue de 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 manual están listados a continuación.

  3. Si tienes la extensión de VS Code instalada, revisa la sección de recomendaciones de la extensión para encontrar la opción de migrar tu proyecto a Capacitor 5.

Actualizar proyecto de iOS de Capacitor 4 a Capacitor 5

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

  2. Actualizar .gitignore: Haz los siguientes cambios en tu .gitignore archivo:

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

Actualizando Capacitor 4 a Capacitor 5 en un proyecto de Android

  1. Actualizar Android Studio: Capacitor 5 requiere Android Studio Flamingo | 2022.2.1 o una versión más reciente debido al uso de Gradle 8, que requiere Java JDK 17. Java 17 viene con Android Studio Flamingo, por lo que no se necesitan descargas adicionales.

  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 de proyecto de Android: En tu archivo variables.gradle actualiza tus valores a los siguientes mínimos nuevos:

    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. Mueva el 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á la configuración predeterminada para androidScheme para las aplicaciones existentes para mejorar la capacidad de las aplicaciones Capacitor 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 en http ahora, incluso si es la configuración predeterminada 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 diálogo de acción
  • Navegador
  • Cámara
  • Dispositivo
  • Ubicación
  • Mapas de Google
  • Notificaciones locales
  • Notificaciones de empuje
  • Barra de estado

Hoja de acción

  • Actualizar el androidxMaterialVersion variable a 1.8.0.

Navegador

  • Actualice el androidxBrowserVersion __CAPGO_KEEP_0__ 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 AndroidManifest.xml.
  • Actualice el androidxMaterialVersion __CAPGO_KEEP_0__ a 1.8.0.
  • Actualice el androidxExifInterfaceVersion __CAPGO_KEEP_0__ a 1.3.6.

Dispositivo

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

Ubicación

  • Actualizar el playServicesLocationVersion a 21.0.1.

Mapas de Google

  • Actualizar 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. Llame 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. Llame checkPermissions() y requestPermissions() según.
  • Actualice firebaseMessagingVersion variable para 23.1.2.

Barra de Estado

  • En iOS, la animación de la barra de estado por defecto ha sido cambiada a FADE.

Siguiendo estos pasos y actualizando tu code según corresponda, deberías tener actualizado ahora tu proyecto desde Capacitor 4 a Capacitor 5. Asegúrate de probar tu aplicación exhaustivamente para asegurarte 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 Actualizar desde Capacitor 4 a Capacitor 5: Una Guía Paso a Paso para planificar el trabajo de plugins nativos, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para la descripción detallada de la 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 Compilación Nativa para el flujo de trabajo del producto en Capgo Compilación Nativa.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error en la capa web, envíe 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 da las mejores pistas que necesitas para crear una aplicación móvil verdaderamente profesional.