There comes a time when you have to make a mobile application from your web application. Is it harder and more time-consuming to transfer a ready-made web application to mobile rather than doing it from scratch?

Thanks to Apache Cordova it’s easy. However, it is still time-consuming when you need to install and choose the best method for yourself, depending on which system you work: Linux, Windows or iOS.

What and why?

Cordova is an open-source mobile development framework that allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platform’s native development language.

How can I start? What do I need?

For the easy part, you need very few things to get up and running. Installation and setting everything up takes just a few minutes.

To do it, run the command to install Cordova framework globally – that will let you do most of the work from the console.

NPM

npm install -g cordova

Then you have 2 options to create a file config.xml that is the main key:

Create a new project with a command “cordova create AppName” then copy config.xml to your main project.
Or just copy the code from below.

After it is done, the next important part would be to have all the application files in AppName/www folder (you can change from which folder the application files are copied, but after every “cordova prepare or cordova add platform” command, it will be overridden).

File structure e.g.:

AppName

www/ – containing all application files and is a root folder from where files are copied to platform folder
- views
- controllers
- images
- etc
config.xml – global configuration file
platforms/
plugins/
etc

config.xml

It should have the basic app information, security restrictions, and basic plugin ‘whitelist’.
After you’re finished with this step, type the command for which platforms you want to build your web application services, e.g.:

cordova platform add android –save,
cordova platform add ios –save,
cordova platform add windows –save.

You can find more supported platforms in Cordova documentation.
Cordova will add and save the following lines to config.xml file if you choose all three:

config.xml

Now for the last part, you have to install the library, framework or program if you haven’t installed them yet on your chosen system.

Which system needs what?

Linux – needs JAVA and Android SDK for android build and PATH configuration: More details
Windows – from Visual Studio you can create a build for Windows, Android and even on iOS platform: More details
iOS – needs Xcode and other configuration: More details

What do you need to remember when building for Android?

When working with Android API 21+ Cookies will be disabled locally. To enable them, you have to add these two lines:

MainActivity.java

to your MainActivity.java file that is located /platforms/android/src/{app}/.
Also, you have to add this part of the line ‘android_asset/www/’ to every path in index.html e.g.:

index.html

How it is originally:

How it should look before build:

and every CSS, JS, image or font should look like that, otherwise, the file will be missing because it won’t be found locally.

What do you need to remember when building for Windows?

When building for Windows, it is better to use Windows 10 universal build because you can spend more time using other versions. You don’t have much to configure, but nothing is perfect. Visual studio can add an unsafe prefix to every href and img src, so the result will be that images won’t show up and href won’t work. To fix something like this, you can add two lines of code to config as shown below:

app.js example file

The next problem is when you use fonts, after creating a build all the icons will look square because you normally add a version in CSS to each of your included font like ‘?v=4.5.0’ and Windows has a problem with that. There are other solutions how to fix this but removing a version from a font helps.
One more problem may occur with paths as well. Of course, you can try to test various paths to make it work but you can also try to remove:

index.html

from index.html. That way, there is a chance you won’t have to change any path.

What do you need to remember when building for iOS?

Well, iOS is very picky and it’s hard to say much about it. I can suggest to remove:

index.html

from index.html like in the Windows situation, if the paths give you a hard time. But the biggest problem that can happen is a white screen which is a result of WebView, not everyone will have this kind of problem but it may happen at some point (maybe because of bad configuration or because of iOS version). The internet is full of solutions that can be found, like (for instance) ngIOS9UIWebViewPatch patch that is a lifesaver. This patch can save you from the white screen that says nothing.

Additional information

With Cordova, you get a plugin from the start called ‘cordova-plugin-whitelist’ and to use it, you have to add this line of code to index.html together with another path:

index.html

Whitelist lets you manage restrictions – you can choose which files are allowed or from which domain or block a chosen type of files. And the other path is used only when you made a build – only then the file cordova.js will be present.

Summary

Well, I can say that Cordova is a great framework to make a mobile app from the completed web application for any platform you want. Of course, by doing that you will have some compatibility issues, but at the end, you won’t have to produce the same app many times natively for every mobile/tablet. There is much more to say about Cordova, how to make a web application that will work on a server and will be available on a mobile as an app or how to use build in mobile functionality like camera or Bluetooth with the help of ngCordova that is made for this work. If you are interested in any of these topics, please let us know by leaving a comment and we’ll try to cover them in the future.

Articles by Robert Beinaravicius

How to Make Your Web App Mobile With Cordova