How to know if your application is running in cordova or a web browser

Why would i need to detect if cordova is being used

Let's suppose that you're using the awesome React framework and your main Javascript file that initializes your app looks like this:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
render(<Main />, document.getElementById('app'));

It will work on mobile devices and the browser, nothing special. However, in our main component there's a cordova plugin that needs to be executed only after the deviceready event of cordova, that would force us to do the following:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

document.addEventListener("deviceready", () => {
    // Render the main app react component into the app div.
    // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
    render(<Main />, document.getElementById('app'));
}, false);

The app will be initialized once the deviceready is triggered, however that would make the app works only in mobile devices and not in desktop because this event will be never triggered in the web browser of the desktop. Therefore a method that verifies when cordova is being loaded (only in mobile devices) is pretty useful:

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

function initApp() {
    // Render the main app react component into the app div.
    // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
    render(<Main />, document.getElementById('app'));   
}

// The usingCordova function returns true if cordova is in the window
if(usingCordova()){
    // Init app on device ready
    document.addEventListener("deviceready", () => {
        initApp();
    }, false);
}else{
    // Init app immediately
    initApp();
}

In this way our app will be initialized correctly in both type of devices.

Option 1

Verify if the window has a property named cordova. The cordova.js file will add the cordova object in the global scope (the window), if the object exists then the app is most likely running on a mobile device:

if(window.hasOwnProperty("cordova")){
    console.log("You're on a mobile device");
}

// Or 

if(typeof(cordova) == "object"){
    console.log("You're on a mobile device");
}

// Or 

if(!!window.cordova){
    console.log("You're on a mobile device");
}

Note that the cordova script needs to be loaded in your html document.

Option 2

As you may know, cordova loads a html file in the webview, that means that you're using a website so to speak in a mobile browser, and as every html document to be viewed in a browser, it needs to be loaded from a URL. This file will be always loaded from a local resource, that means that the protocol of the file will be never (unless till the date) http or https but file:// (e.g in Android because in Windows phone it's x-wmapp0). 

The point is that through the protocol of the document you can check if your application is running in a mobile device and therefore using cordova by checking that the protocol ain't http or https:

if(document.location.protocol != "http:" && document.location.protocol != "https:"){
    console.log("Cordova probably available (Running with protocol " + document.location.protocol + ")");
}

// Or

if(document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1){
    console.log("Cordova probably available (URL " + document.URL + ")");
}

Note that you need to test your project in the desktop with the http or https protocol, loading it from a file will make this option useless.

Option 3

Add an event listener (load) for the cordova script that creates a boolean variable in the window (usingCordova) initially set to false and then once the cordova script loads, it will be set to true. Then you can use a simple if statement verifying wheter cordova was loaded or not.

<script>
window.usingCordova = false;
</script>
<script src="cordova.js" onload="javascript:window.usingCordova = true;"></script>

And then:

if(window.usingCordova){
    console.log("Using cordova");
}

Happy coding !