Some hints about Cordova / Phonegap

At my work I’ve recently begun using Phonegap to build a web-based but native-looking android/ios app. Phonegap is a server software / compiler that lets you build operational websites and then package them up to look like native phone apps. It also gives you access to the native functions of the phones.

A thing called Cordova also does this; it’s unclear if Phonegap runs on Cordova or if they are in fact the same thing. Writing ‘Phonegap/Cordova’ seems to be the current vogue.

The documentation for Phonegap seems to be lacking in certain areas and it caused me some trouble until I understood a few unwritten things about it. So I’ll write those hints here to make them clear for other new users of it.

Here’s some useful information to know:

Hint 1: You (Sometimes) can’t live edit

Unlike XXAMP, Phonegap compiles your application whenever you start the server and your site will use this compiled application. Occasionally, If you make changes to the app while the server is running, they will not display correctly and will likely be lost on further restarts. If you encounter this behaviour, the safe way to develop is to turn the server on when you want to view your site, and then turn it back off when you have finished viewing it.

When editing, you should edit the WWW folder. This is your app ‘prototype’. When the server starts it compiles this prototype into platform-specific apps that are placed in the platforms folder. Editing anything in the platforms folder will do nothing so don’t worry about it.

Hint 2: The templates are broken

If you are looking to just get a clean default install running, be aware of this. The templates that projects begin with are often a bit broken. They include a built but broken version of the intended application that will generate a ton of errors when you first load it. When you first begin a project, you should delete this broken app and then start the server to make phonegap build a new, working one.

Incidentally, the template requests version 2.1.2 of the status bar plugin, which has an implementation bug that was fixed in version 2.2.0. The plugin is actually up to version 2.4.2 at this point. You should update this number.

Hint 3: Phonegap controls your MIME types

If you want to run third-party libraries such as Bootstrap and Jquery you need to do a bit of extra lifting due to the way Phonegap manages it’s folder structure. Dropping those libraries entirely into their own folders and then referencing them like normal won’t work and will generate confusing MIME Type errors.

The reason for this is Phonegap strictly assumes that the mime type of a file matches the folder it’s in. There are folders for CSS, JS and others. You will need to separate the JS and CSS files from these libraries into their own folders.

For some libraries you may also have to modify the way they locate their own supporting files.

Hint 4: Phonegap is bad at permissions

When Phonegap server is started, it will take ownership of your project folder and you may have difficulty moving or deleting folders and files. This is not usually a problem, however it will only release the permissions when the server is manually stopped. If Phonegap is closed while the server was running, those permissions remain indefinitely and you will sometimes need to reboot in order to regain access.

This info should hopefully help you understand any weird behaviour it’s doing and let you get on with writing apps. Phonegap is generally quite good, these caveats are just a bit weird and I haven’t seen them mentioned anywhere so thought I’d cover it for completeness’s sake.