Detect between a mobile browser or a PhoneGap application

Question

Is it possible to detect if the user is accessing through the browser or application using JavaScript?

I'm developing a hybrid application to several mobile OS through a web page and a PhoneGap application and the goal would be to:

1. Use the same code independently of the deployment target
2. Add PhoneGap.js file only when the user agent is an application

Solution 1

You could check if the current URL contains http protocol.

var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
    // PhoneGap application
} else {
    // Web page
}

Solution 2

Quick solution comes to mind is,

onDeviceReady

shall help you. As this JS call is invoked only by the Native bridge (objC or Java), the safari mobile browser will fail to detect this. So your on device app(phone gap) source base will initiate from onDeviceReady.

And if any of the Phonegap's JS calls like Device.platform or Device.name is NaN or null then its obviously a mobile web call.

Please check and let me know the results.

Solution 3

I figured out a way to do this and not rely on deviceready events thus, keeping the web codebase intact...

The current problem with using the built in deviceready event, is that when the page is loaded, you have no way of telling the app: "Hey this is NOT running on an mobile device, there's no need to wait for the device to be ready to start".

1.- In the native portion of the code, for example for iOS, in MainViewController.m there's a method viewDidLoad, I am sending a javascript variable that I later check for in the web code, if that variable is around, I will wait to start the code for my page until everything is ready (for example, navigator geolocation)

Under MainViewController.m:

- (void) viewDidLoad
{
    [super viewDidLoad];
    NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"];
    [self.webView stringByEvaluatingJavaScriptFromString:jsString];
}

2.- index.html the code goes like this:

function onBodyLoad()
{
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){;
    myApp.run();
}

try{
    if(isAppNative!=undefined);
}catch(err){
    $(document).ready(function(){
        myApp.run();
    });
}

Solution 4

PhoneGap has window.PhoneGap (or in Cordova, it's window.cordova or window.Cordova) object set. Check whether that object exists and do the magic.

Solution 5

Inside the native call where the url for the phonegap app is loaded you add a parameter target with value phonegap. So the call for android becomes something like this.

super.loadUrl("file:///android_asset/www/index.html?target=phonegap");

Your website using this code won't be called with the extra parameter, so we now have something different between the two deploying platforms.
Inside the javascript we check if the parameter exists and if so we add the script tag for phonegap/cordova.

    var urlVars = window.location.href.split('?');
    if(urlVars.length > 1 && urlVars[1].search('target=phonegap') != -1){
        //phonegap was used for the call
        $('head').append('<script src="cordova.js"></script>');
    }
    

A small caveat: this method requires to change the call to index.html in phonegap for each different targeted mobile platform. I am unfamiliar where to do this for most platforms.

View more solutions