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 on large and not very finds that need to be fixed somewhere, so as not to be searched again later. 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 it is clear. The developers do not often use the second opportunity, but you can meet it.

Using a slightly modified PhoneGap application, you can demonstrate on the promo site not just a screenshot, but a really working JS dynamics. That is, wrap the PhoneGap source in an iframe, place it inside the graphic view of some regular iPhone and voila. Some wow factor and a penny for conversion are guaranteed.

What needs to be changed?

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

Usual approach

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

Decision

We always include cordova.js in the HTML, but delete the cordova.js file itself from the project tree. When assembling the PhoneGap Build project, the server itself will substitute the necessary JS file in the tree, and when it is opened from the browser, the console will simply spit out a single JavaScript error that does not affect anything. The start of the JS logic is as follows:

if( window.cordova ) {
    document.addEventListener( 'deviceready', start, false );
} else {
    $( start );
}
function start() {
    // Здесь начинается JS-логика нашего приложения
}