Migrate Your Web App to Cross-Platform Mobile App Using CORDOVA

cross platform app development

Mobile application is one of the fastest emerging fluidity in the market in todays date. If you formerly hold up well maintained running web app and want to flicker in this trend you can hike up using Apache Cordova.




The Commencement of Cordova development is quite pleasing: you can utilize your existing HTML + JavaScript + CSS app to build cross-platform mobile app for mesmerizing platforms like iOS, Android, Windows Phone, and many more.


Apache Cordova is good opinion for those who have web app to be ported on different mobile platform. But, firstly let's understand what exactly is CORDOVA.


What is Apache Cordova?




CORDOVA is a free and open-source platform provided for structuring native mobile app using various languages like HTML , CSS , JavaScript.

By this , it allows targeted cross-platform with just a single code-base.

Basically, Cordova is alike of wrapper wrapped with an app that has implanted web browser where your entire web application is fully loaded.


How to install and Setup Apache Cordova ?


Before installing anything on Cordova you need to remember that you have to install respective SDK for the intended platform you wish to built in your app.

Here today we focus on Ios platform for which we need a Mac Computer with Xcode as platform.

To begin with Firstly install Cordova Command- line utility through command:

install -g cordova

Now, create new Cordova project as below:

create your-app-name com.example.myapp MyAppName

Create command consist of 3 Arguments:

1)your-app-name : folder name where app is created.

2)com.example.myapp : Domain identifier

3)MyAppName: App display Name.

Browse to project folder and add platform you wish to build in as below:

platform add [platform]


Supported Platforms:





Every time you run Platform add Command it will include all native files to build up your app on intended platform.

After this a folder name ios consisting of .Xcodeproj files & others even is found.


Now, we have successfully installed Cordova now let's move on with Migration.


Transfer your Web app to Cordova


Firstly find /WWW directory . This is where your application is placed in.

Perform below steps to update it.

1) Update HEAD tag of your file and see that no meta tag of cordova is misplaced and add your necessary elements.

2) Update BODY portion with your content.

3) Add respective references of files included.


A function located in /js/index.js needs to be called on onDeviceReady() method at the time of init() of app.

var app = {
    initialize: function() { ... }    
    bindEvents: function() { ... }    

    onDeviceReady: function() {
        // Your app init code


Now, all the CSS, .js files , images are drifted inside /WWW/ folder.


Adding your hosted Web-page as an App


If your web app is already crowded on server then Add Network info plugins and dilogs through command:

plugin add cordova-plugin-dialogs

plugin add cordova-plugin-network-information


Once onDeviceReady() event takes place just navigate to the URL and you are done ..!


  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
  document.addEventListener("deviceready", onDeviceReady, false);

Describing application Icon & Splash Screen


These are the important aspects of your mobile app as it will decide the look and feel of your mobile.

You can specify your icon in config.xml for any platform by using element.

If no icon is specified then Cordova default icon is used.

Splash element is used to define splash/startup screen of mobile device.

check in progress


Splash Screen Code for Ios:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <icon src="generic-icon.png" />
    <platform name="ios">
    <icon src="ios-icon.png" />
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
        <platform name="android">
        <icon src="android-icon.png" />

Testing Your app:


For testing an app you need a device either android or Ios whatever platform you choose .

But for that first you need to install emulator and for that follow below code:

npm install -g ios-sim


Running Application:


If application is built well and emulators are installed successfully then you can run your app before as below:

run [platform]

Wrapping Up of Session:

Now ,you can easily create fantastic apps with cordova but for successful app it means that end user should not notice that the app is wrapper of web application. Quite simple if you have one-pager responsive app but if it's not the scenario consider hustling your app to like like native that means to handle offline scenarios, page transitions , disabling navigating external sites , addition of relevant platform icon and much more things but you don't worry Hyperlink Infosystem will look out these scenarios for you. It is one of the best app developers India companies serving huge number of people with its dedicated services and outstanding applications. Contact Now to develop app with Cordova and get a free quote.


Khyati Shah

Khyati Shah is associated with Hyperlink Infosystem as Human Resource Manager. She is one of the talented writers who contributes to our various blogs. Khyati also contributes in company\'s Search Engine Optimization activities. She is also very active on numerous social media sites and enhance public relations for the company. So whole and sole we can describe as A sharp writer, A social media pro and she owns very good command on public communication through different social media sites. She has done Masters in Human Resources and her Interests are reading, exploring different places and listening to music.

Call Us Now

usa +1 309 791 4105 india +91 8000 161 161

Get Free Quote Now !