Ionic Capacitor vs Apache Cordova Difference With Example
By: Sunil Kumar
Tags: Mobile App Development, Ionic, Ionic Capacitor, Ionic Native, Ionic Framework

Ionic Capacitor is an open source framework innovation to help you build Progressive Native Web, Mobile and Desktop apps. On the other side Apache Cordova formerly PhoneGap > Adobe PhoneGap does the same for accessing native features of the device from mobile WebView.

So, What really makes them succeed over the other, in future?

Apache Cordova aka PhoneGap, has been there for a while, with wide spread community support, like the growing Ionic Framework.

In developer terms using Cordova to build a mobile hybrid native app, you use cordova plugin libraries, which behind the scene builds your app using Android SDK or iOS within the Cordova framework (cordova.js/phonegap.js).

With Ionic Capacitor, you create the app, without using any cordova imports, not even cordova.js, instead Capacitor’s own native plugin repository imported as @capacitor/core. Capacitor can also be used without the Ionic framework and it’s backward compatible with Cordova.

As you know starting Ionic Framework v4, you can use any UI framework of your choice — Angular (Default), ReactJS and Vue as of now. This would majority help the software development industry, making it easier for them, to find any web developer, to hop-on and start coding with minimal or zero learning curve to build and publish hybrid native apps.

How to add capacitor to your Ionic project?

ionic start democap blank

Then, cd into,

cd democap

npm run build

Now, install capacitor package,

npm install --save @capacitor/cli @capacitor/core

above command will install two packages and save it inside package.json,

+ @capacitor/cli@x.x

+ @capacitor/core@x.x

Initialize the capacitor app,

npx cap init demoappcap com.demoappcap.app

you should see below,

Your Capacitor project is ready to go! 🎉

Add platforms using "npx cap add":

npx cap add android <=== To build Android app

npx cap add ios <=== To build iOS app

npx cap add electron <=== To build Desktop app

For this example, we use Android, so run,

npx cap add android

You should see,

✔ Installing android dependencies in 26.22s

✔ Syncing Gradle in 2.55ms

✔ add in 26.31s

✔ Copying web assets from www to android/app/src/main/assets/public in 407.27ms

✔ Copying native bridge in 4.57ms

✔ Copying capacitor.config.json in 1.15ms

✔ copy in 429.06ms

✔ Updating Android plugins in 3.31ms

Found 0 Capacitor plugins for android:

✔ update android in 21.26ms

Lets add one camera plugin, open /src/app/home/home.page.html

<ion-header>

<ion-toolbar>

<ion-title>

IONIC CAPACITOR DEMO

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding="">

<img [src]="takenPicture">

<button ion-button="" (click)="takePicture()">

TAKE PICTURE

</button>

</ion-content>

open, /src/app/home/home.page.ts

import { Component } from '@angular/core';

import { Plugins, CameraSource, CameraResultType } from '@capacitor/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

takenPicture: any;

async takePicture() {

const takePicture = await Plugins.Camera.getPhoto(

{

quality: 90,

allowEditing: true,

source: CameraSource.Camera,

resultType: CameraResultType.Uri

}

);



this.takenPicture = takePicture.webPath;

}

}

now lets, save and run,

npm run build |---or use---| npx cap android

every time you build you need to copy the files to directory so for us its android.

npx cp copy

unlike Ionic and Cordova, you cannot run the app onto the device from here, you need to open the installed IDE,

npx cap open android

Above source is your starting point, to understand the difference between Cordova vs Capacitor.

To open your code in specific IDE,

npx cap open ios // Xcode

npx cap serve // PWA - open your web app in a local web server

Migrating existing Ionic Framework app to Capacitor

Just go to the root of your project in CMD or Terminal and type below command

ionic integrations enable capacitor

Thats it, verify if you have a new file created in your project root

capacitor.config.json <------- file added by capacitor

You can continue to add any platform you need to support

Your Capacitor project is ready to go! 🎉

Add platforms using "npx cap add":

npx cap add android <=== To build Android app

npx cap add ios <=== To build iOS app

npx cap add electron <=== To build Desktop app

To avoid iOS app submission/re-submission rejections please make sure you upgrade your app to NOT use UIWebView and instead use WKWebView