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

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.

Créditos del artículo

Martin Donadieu

Escritor

Valeria

Revisor

Jordan

Editor

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.

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

Instale la latest versión de la Capacitor CLI en su proyecto:
```
npm i -D @capacitor/cli@latest
```
Correr el siguiente comando para que el CLI se encargue de la migración:
```
npx cap migrate
```
Si algunos pasos de migración no pueden ser realizados, se proporcionará información adicional en la salida del terminal. A continuación, se muestran los pasos de migración manual.
Si tiene instalado el 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.

Actualizar un proyecto de Capacitor 4 a Capacitor 5

Actualizar Xcode: Capacitor 5 requiere Xcode 14.1+.
Actualizar .gitignore: Haga los siguientes cambios en su .gitignore archivo:
```
- App/Podfile.lock
+ App/output
```
Actualice los activos a usar un icono de aplicación único: Xcode 14 admite un solo icono de aplicación de 1024x1024. Limpie su AppIcon.appiconset eliminando todas las tamaños innecesarios.

Actualizando el proyecto Android de Capacitor 4 a Capacitor 5

Actualice Android Studio: Capacitor 5 requiere Android Studio Flamingo | 2022.2.1 o una versión posterior 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.
Corre el 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, corra Tools -> AGP Upgrade Assistant.

Actualice las variables del proyecto de Android: En su variables.gradle archivo, actualice sus 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'

Actualice los Servicios de Google:

# build.gradle
dependencies {
-       classpath 'com.google.gms:google-services:4.3.13'
+       classpath 'com.google.gms:google-services:4.3.15'
}

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

Actualice el 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

Deshabilite Jetifier:

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

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

Actualice el esquema de Android: En Capacitor 6, https será la configuración predeterminada para androidScheme para 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 el valor predeterminado actual.
```
{
  server: {
    androidScheme: "http"
  }
}
```
Actualice la versión de Kotlin: Si su proyecto utiliza Kotlin, actualice la 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
Geolocalizació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

Actualizar el androidxBrowserVersion variable a 1.5.0.

Cámara

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

Dispositivo

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

Geolocalización

actualice 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 to 1.10.0.
- kotlin_version to 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. checkPermissions() y requestPermissions() accordingly.

Notificaciones de Pulsación

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

Barra de Estado

La animación de la barra de estado predeterminada en iOS ha sido cambiada a FADE.

Sigue estos pasos y actualiza tu code según corresponda, deberías tener actualizado 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 Directorio de Plugins Capgo para el flujo de trabajo del producto en Directorio de Plugins Capgo Plugins de Capacitor por Capgo para los detalles de implementación en Plugins de Capacitor por Capgo Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Ionic Enterprise Plugin Alternatives, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.