Apache Cordova vs Capacitor

Si, ya sé que el título es un poco tendencioso, pero tiene su razón. Hace un par de semanas se publicó en el blog de Angular una noticia muy interesante. Se tratan de los Schematics para implementar Capacitor en Angular directamente, sin necesidad de utilizar Ionic. Esto permite mucho juego, ya que no siempre tenemos una implementación realizada en Ionic, y hasta entonces solo contábamos con la opción de implementar Apache Cordova directamente en un desarrollo sobre Angular.

¿Qué es Capacitor?

En pocas palabras, es un framework que permite "transformar" una WebApp en una App Mobile o Desktop mediante el uso de WebView. Es el framework por excelencia de Ionic. Su principal diferencia con Angular es que genera un proyecto de Android Studio o CodeX en lugar de compilar directamente con el SDK (en este caso si que no hay diferencias para iOS, pero si con Android). Sin embargo, el principio básico es el mismo en ambos sistemas, a tal punto que pueden usarse los plugins de Cordova en Capacitor.

Ventajas de Capacitor

• Se integra completamente a Angular. No solo desde los schematics, sino también al momento de compilar, no es necesario hacer ajustes en los scripts como en el caso de Apache Cordova.

• Genera el proyecto de Android, lo cual es muy útil para armar Plugins.

• Es compatible con todos los Plugins de Cordova y los de Ionic a la vez, lo que permite utilizar Capacitor sin riesgos de compatibilidad con algún plugin en particular.

• Permite generar un proyecto en Electron. Esto es sumamente interesante, ya que Cordova en principio no lo tiene (se puede hacer pero manualmente con la plataforma Browser). Capacitor permite agregar la plataforma Electron del mismo modo que se agrega cualquier otra plataforma, esto permite trabajar con mucha sencillez las aplicaciones Desktop.

Comandos de Capacitor

npx cap add <plataforma>: Agrega una plataforma (es necesario tener compilado el proyecto de Angular) que puede ser android, ios o electron.

npx cap open <plataforma>: Abre el SDK / Editor de la plataforma (por ejemplo el Android Studio o XCode).

npx cap copy: Copia los archivos compilados de Angular al proyecto de Android / iOS / Electron (necesario cuando actualizamos).

npx cap sync: Sincroniza las librerías NPM con el proyecto de Capacitor (necesario cuando usando plugins de Cordova y Ionic).