Cordova checklist 2023

Amitpal Singh

February 8, 2023

Cordova checklist 2023 for building cordova android applications

Apache Cordova is an open-source mobile development framework. WebView, Web App, Plugins fall under the architecture of this cordova framework.

We use Cross Platform Workflow to start building our apps.

Build your first app through this workflow.

If you want your app to run on as many different mobile operating systems with little help or need then this platform-specific development is for you.

This workflow work around the cordova CLI. The Command Line Interface (CLI) is a high-level tool that allows you to build projects for many platforms at once.

Here is a complete checklist for cordova based application to start. It is an easier approach through simple steps:

1. Open Command Prompt and go to root directory C:\

Open Command Prompt in windows 10 and set your root directory to local drive c:\ this is where the operating system is installed.

Run CMD
cd..

Example:

2. Create a project with appname and project directory

cordova create appname com.appname.subdomain AppName

3. Go Inside the project or app folder in cmd

cd appname

you can easily edit the cordova android project domain info, project name, project description, author name and author email in config.xml file

4. Add platform like android or ios in your project

cordova platform add android

5. Set Minimum and Target SDK Versions

Add android minimum and target SDK version into config.xml file present in your project root folder. Replace platform for android code with this code below:

<platform name="android">
<allow-intent href="market:*" />
<preference name="android-minSdkVersion" value="22"/>
<preference name="android-targetSdkVersion" value="31"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="true"/>
</platform>

6. Add Cordova Plugin into your cordova app or project

You can add only required cordova plugins to your android application or cordova app. There are so many plugins available at npm/cordova library. Go back to cmd and enter these plugin commands individually one by one to add.

cordova plugin add cordova-plugin-splashscreen

cordova plugin add onesignal-cordova-plugin --save

cordova plugin add cordova-plugin-vibration

cordova plugin add cordova-plugin-android-permissions

cordova plugin add cordova-plugin-navigationbar-color

cordova plugin add cordova-plugin-x-socialsharing

cordova plugin add cordova-plugin-x-toast

Note: If any of the above plugin is creating error with your application then see version number for compatibility issues with current cordova version, sometime plugins are outdated and creates problem. You can uninstall these plugins by simply use this command: cordova plugin remove plugin-name

7. Remove Content-Security-Policy to work externally

Remove the Content-Security-Policy code from folder/www/index.html or all html files, if you want to link this app operational with your website or domain.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

8. Add scripts or required files

Add jQuery library file in root folder and include in your index.html or needed html file in project (optional)

9. Create App Icon

Create icon and splashscreen online from https://pgicons.abiro.com/

Copy the downloaded res folder and paste in your root directory.

copy the sample code from https://pgicons.abiro.com/config.xml and add in your config.xml file inside the platform code

<icon density="ldpi" src="res/icon/android/ldpi.png"/>
<icon density="mdpi" src="res/icon/android/mdpi.png"/>
<icon density="hdpi" src="res/icon/android/hdpi.png"/>
<icon density="xhdpi" src="res/icon/android/xhdpi.png"/>
<icon density="xxhdpi" src="res/icon/android/xxhdpi.png"/>
<icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png"/>

<splash density="hdpi" src="res/drawable-port-hdpi/screen.png" />
<splash density="ldpi" src="res/drawable-port-ldpi/screen.png" />
<splash density="xhdpi" src="res/drawable-port-xhdpi/screen.png" />
<splash density="xxhdpi" src="res/drawable-port-xxhdpi/screen.png" />
<splash density="xxxhdpi" src="res/drawable-port-xxxhdpi/screen.png" />

Make sure you have these folders and have screen.png file in each.

drawable-port-hdpi
drawable-port-ldpi
drawable-port-xdpi
drawable-port-xxdpi
drawable-port-xxxdpi

9. Allow External Connection

Allow external url in app for ajax and API purposes. Go to androidmanifest.xml and put this code inside <application> tag:

android:usesCleartextTraffic=”true”

9. Finally Build the Project

Build your application in cmd

cordova build android

Install the app-debug.apk into your phone and enjoy!

Share this post: