What is the most efficient and reliable method to detect if an app is running in phonegap, or simply inside of a mobile/desktop browser with JavaScript? I am attempting to eliminate any of the issues that prevent me from testing/debugging my phonegap apps in any browser (desktop or mobile), and create a truly universal code base for my apps.

I intend on structuring my functions with phonegap specific calls like so:

if (phonegapisrunning) {
    // phonegap specific javascript calls here
}
else {
    // standard javascript calls here
}

While searching for a solution I came across this thread: PhoneGap: Detect if running on desktop browser.

While this thread discusses this issue, I do not see a clear answer to which method is the most efficient/reliable. Should I bind to the onDeviceReady() event? Should I check window.device? Is there a more efficient or reliable way to check if an app is running in phonegap via JavsScript?

And this thread which mentions the Ripple Chrome Plugin: Phonegap web app in regular desktop browsers

The Ripple tools looks like it could be a valuable tool for testing. But I am trying to make my phonegap apps run in a desktop browser without a plugin.

If it is determined that the app is not running in phonegap, I would then use useragent sniffing to determine if browser is desktop or mobile, and further separate any code if needed.

What is the most efficient and reliable method to detect if an app is running in phonegap, or simply inside of a mobile/desktop browser with JavaScript? I am attempting to eliminate any of the issues that prevent me from testing/debugging my phonegap apps in any browser (desktop or mobile), and create a truly universal code base for my apps.

I intend on structuring my functions with phonegap specific calls like so:

if (phonegapisrunning) {
    // phonegap specific javascript calls here
}
else {
    // standard javascript calls here
}

While searching for a solution I came across this thread: PhoneGap: Detect if running on desktop browser.

While this thread discusses this issue, I do not see a clear answer to which method is the most efficient/reliable. Should I bind to the onDeviceReady() event? Should I check window.device? Is there a more efficient or reliable way to check if an app is running in phonegap via JavsScript?

And this thread which mentions the Ripple Chrome Plugin: Phonegap web app in regular desktop browsers

The Ripple tools looks like it could be a valuable tool for testing. But I am trying to make my phonegap apps run in a desktop browser without a plugin.

If it is determined that the app is not running in phonegap, I would then use useragent sniffing to determine if browser is desktop or mobile, and further separate any code if needed.

• javascript
• cordova

4 Answers 4

I've seen many answers about checking the user agent. Though those are useful for paring which platform on which a page was loaded, they still do not differentiate whether running within a cordova app's browser or within a regular web browser. After a whole bunch of digging in the android cordova javascript file, I found that the following variable is set when running in a cordova app:

window._cordovaNative

Looking through the ios cordova javascript, I found:

window._nativeReady

Throw these alerts in your page before you ever load any cordova javascripts or check any user agents, etc. and pare results between loading from a web browser and loading from a cordova app that gets dynamic content:

alert("Android: " + window._cordovaNative);
alert("iOS: " + window._nativeReady);

I guess the other devices' phonegap files have different global variables, but for now, this is going to work great for me -- I hope it works well for you!

My suggestion is to create/call your javascript functions outside of the onDeviceReady Phonegap call.

Or maybe check what version of Cordova / Phonegap is running e.g.:

var string = device.cordova; // or device.phonegap

if (string == null) {
  //do non phonegappy stuff here
} else {
  //do phonegappy stuff
}

While it may not be the cleanest solution, a simple and reliable method is to create/set a global variable on deviceready:

var isCordovaReady = true;

Then:

if (isCordovaReady) {
    // do cordova/phonegap stuff
}
else {
    // do non cordova/phonegap stuff here
}

I posted the top answer for: PhoneGap: Detect if running on desktop browser

Although this isn't heavily documented and somewhat controversial I've been able to use this chunk of code for all my projects:

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
    document.addEventListener("deviceready", onDeviceReady, false); //phone
} else {
    onDeviceReady(); //this is the browser
}

You can modify it a bit to work for your projects like so:

var phonegapisrunning = false;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
    document.addEventListener("deviceready", onDeviceReady, false); //phone
    //change to true
    phonegapisrunning = true;

} else {
    onDeviceReady(); //this is the browser
}

Hope this helps !