PhoneGap: Detect if running on desktop browser

Question

I\'m developing a web application that uses PhoneGap:Build for a mobile version and want to have a single codebase for the \'desktop\' and mobile versions. I want to be able

Answer 1

To keep one codebase, what's of interest is the "platform" the code is running on. For me this "platform" can be three different things:

• 0: computer-browser
• 1: mobile-browser
• 2: phonegap/cordova

The way to check for the platform:

var platform;
try {
 cordova.exec(function (param) {
   platform = 2;
  }, function (err) {}, "Echo", "echo", ["test"]);
} catch (e) {
  platform = 'ontouchstart' in document.documentElement ? 1 : 0;
}

Note:

• This has to be run only after cordova.js has been loaded (body onload(...), $(document).ready(...))

• 'ontouchstart' in document.documentElement will be present in laptops and desktop monitors that have a touch-enabled screen so it would report a mobile-browser even though it is a desktop. There are different ways to make a more precise check but I use it because it still takes care of 99% of the cases I need. You can always substitute that line for something more robust.

Answer 2

I use this method:

debug = (window.cordova === undefined);

debug will be true on the browser environment, false on the device.

Answer 3

if ( "device" in window ) {
    // phonegap
} else {
    // browser
}

Answer 4

This seems to be viable and I have used it in production:

if (document.location.protocol == "file:") {
    // file protocol indicates phonegap
    document.addEventListener("deviceready", function() { $(initInternal);} , false);
}
else {
    // no phonegap, start initialisation immediately
    $(initInternal);
}

Source: http://tqcblog.com/2012/05/09/detecting-phonegap-cordova-on-startup/

Answer 5

The way I'm doing it with is using a global variable that is overwritten by a browser-only version of cordova.js. In your main html file (usually index.html) I have the following scripts that are order-dependent:

    <script>
        var __cordovaRunningOnBrowser__ = false
    </script>
    <script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
    <script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->

And inside cordova.js I have simply:

__cordovaRunningOnBrowser__ = true

When building for a mobile device, the cordova.js will not be used (and instead the platform-specific cordova.js file will be used), so this method has the benefit of being 100% correct regardless of protocols, userAgents, or library variables (which may change). There may be other things I should include in cordova.js, but I don't know what they are yet.

Answer 6

I have the same issue.

I am leaning towards adding #cordova=true to the URL loaded by the cordova client and testing for location.hash.indexOf("cordova=true") > -1 in my web page.