Using Cordova

I had only created one Android app before and that was done in Java as a learning exercise. It was a great learning exercise but a poor app.

Having created the Munro Bagger website with other students from CodeClan, I wondered how easy it would be to create an app with the same functionality. For those not familiar with the term, a “Munro” is a mountain in Scotland with a height of 3000ft or more above sea level. The Munro Bagger website allows the user to review the weather on all 282 Munros to help them decided which peak to target and when. When our group was creating the website we felt that we needed a good solution for people on the move so an app seemed like a good idea.

Cordova seemed like a simple solution because it provides a wrapper for JavaScript which allows it to run on Android, iOS or Windows phones providing you have the development environment for the target (or use PhoneGap). It seemed too good to be true so it had to be done. I have read criticisms of the technology from people who say that Cordova apps don’t look or behave like native apps. Well take a look at the screenshots in this post. Does it look like an Android app or not? It even behaves like an Android app; you can go to the Play Store, download it and find out for yourself. I have come across a few things that don’t work quite the way they I would like but nothing that really gets in the way of the user experience.

If you follow the link to the Munro Bagger website, you will see that it has a very different look and feel from the app. I changed the look and feel by using React-MDL which was the subject of an earlier post. It is React-MDL that gives the app the look and feel of an app. Cordova just wraps the JavaScript and provides plugins to allow the features of the phone to be accessed.

When I started using Cordova, I ordered a couple of books by John M. Wargo: “Apache Cordova 4 Programming” and the companion book “Apache Cordova API Cookbook”. Good books and useful but, in the year and a bit since publication, Cordova has moved on to version 6 and the Cordova online documentation is pretty good. Nevertheless, the “API Cookbook” is still worth looking at for its example code.

When I first brought React-MDL and Cordova together everything looked great but as soon as I used Dialogs, everything went wrong. On older phone’s, Android’s built-in browser just can’t render Dialogs. I explored using polyfills but eventually found Crosswalk and Crosswalk is awesome!

Crosswalk for Cordova embeds a recent Chromium browser engine in your Cordova app and supports every version of Android back to version 4.0. As soon as I added Cordova to the project Dialogs started to work which is all I was after but the debugging environment was a revelation. You can connect Chrome to your Crosswalk-enabled app whether running on a phone or an emulator and interact with it as if it was a normal JavaScript web app. Amazing stuff.

A Cordova/Crosswalk app is fairly large, certainly much larger than a similar native app would be but the simplicity of migration from Web to app is impressive; it only took a few weeks to replace the UI of the Munro Bagger website with a React-MDL/Cordova/Crosswalk UI and that included a lot of exploration and problem solving. The total size of the Munro Bagger Android app is 27MBytes which is approximately half the 50MByte maximum size permitted by Google.

One other area of app development caused some head scratching and that was the handling of network outages – an app is bound to go offline sometime – but that’s a subject for another day.

Leave a Reply

Your email address will not be published. Required fields are marked *