Running PhoneGap applications in a desktop browser

With this post I want to open a series of small notes about using PhoneGap in real projects. Notes about large and not very great finds, which need to be fixed somewhere, so that later not to look again. At the end of the post - a vote on whether such publications will be useful here.

Why open mobile apps in a browser?

There are two reasons: 1) for debugging, 2) for demonstration. About the first is clear. The second opportunity is not often used by developers, but you can meet it.

Using a slightly modified PhoneGap application, you can display not just a screenshot on the promo site, but a real working JS dynamic. That is, wrap the PhoneGap source in an iframe, put it inside a graphical view of some next iPhone and voila. Some wow-factor and a penny to the conversion are guaranteed.

What needs to be changed?

Inclusion in the HTML cordova.js on the desktop gives a lot of errors, the mobile application without this inclusion will not work. Start JS logic on the desktop and on the mobile phone need for different events. If we start JS-logic on a mobile phone with a standard domready event, we will get extra pop-up questions when trying to use GPS navigation.
')

The usual approach

The simplest thing is to make two versions of the source code. 1) for mobile phones : HTML with the inclusion of cordova.js + JS with the start of the deviceready event and 2) for the browser: without cordova.js + JS with the start of the domready event. And comment / uncomment then small pieces before each assembly. Pretty quickly annoying.

Decision

Always include cordova.js in HTML, but remove the cordova.js file from the project tree. When building the PhoneGap Build project, the server will itself substitute the necessary JS file into the tree, and when opening from the browser to the console, a single JavaScript error that does not affect anything will be spat out. Start JS-logic carried out as follows:

if( window.cordova ) { document.addEventListener( 'deviceready', start, false ); } else { $( start ); } function start() { //   JS-   }