When building a complex app using PhoneGap / Cordova, it is much easier if you can debug the html component in a regular browser - This means that the app has to work when native plugins are not available, and to avoid calling those plugins you need to know if the page is running in a browser or embedded in an app.

A search for “detecting phonegap” brings up several options that work in most cases:

My app has a couple of requirements that make these less useful though:

  • It has to be viewable with mobile Safari - the same browser that is embedded in the app - so no user agent checking
  • The first thing the app does is choose between an HTML5 web sql database and a native sqllite database - we need to know if Cordova is going to load rather than if it has loaded.

The solution turns out to be very simple - the embedded pages are always accessed as local files, while the debug version is always on http.

if (document.location.protocol == "file:") {
// file protocol indicates phonegap
document.addEventListener("deviceready",
function() { $(initInternal);}
, false);
}
else {
// no phonegap, start initialisation immediately
$(initInternal);
}
view raw detectphonegap.js hosted with ❤ by GitHub

Note that this code is run immediately rather than on document ready as deviceready only fires once. If timing becomes an issue or you need to run the script at a point where deviceready may have already fired, it should be possible to extend the code with a check of Cordova.available, which is set around the same time as deviceready.