How to detect if I am in browser (local development) in Ionic 2

Question

I want to make sure to launch inappbrowser only if I am on devices (iOs, Android...), but if I am in browser (local development mode or just a Web App with gulp build), I wa

Answer 1

You can use platform.is('core'), true when on browser. Platform list:

• android: on a device running Android.
• cordova: on a device running Cordova.
• core: on a desktop device.
• ios: a device running iOS.
• ipad: on an iPad device.
• iphone: on an iPhone device.
• mobile: on a mobile device.
• mobileweb: in a browser on a mobile device.
• phablet: on a phablet device.
• tablet: on a tablet device.
• windows: on a device running Windows.

See http://ionicframework.com/docs/v2/api/platform/Platform/ for more details.

Answer 2

With this you can detect if you are in a browser:

if(window.hasOwnProperty('cordova')){ /* use webview */ }
else { /* use browser link */ }

Answer 3

We have a simple way to know if we are running the '/www' folder of the project in browser, or in a device (emulate/build).

In local projects of Cordova/Phonegap, the index.html has this label:

<script type="text/javascript" src="cordova.js"></script>

But this file does not exists, because Cordova/Phonegap will inject phonegap.js or cordova.js when we emulate or build. And if we run www folder in browser, always can see an error like this:

GET file:///D:/Cordova/Workspace/TestProject/www/cordova.js net::ERR_FILE_NOT_FOUND

Then we can check in the index.html label if this file loads or not. If loads, we are in App, if not, we are in browser (local):

<script type="text/javascript" src="cordova.js" onload="alert('app!');"></script>

We think is the fastest way to know where are we.

Answer 4

Here you go., you can use the following function in replacement of your click function.

onClickOfButton(){
      // Check If Cordova/Mobile
   if (this.platform.is('cordova')) {
        window.location.href = url;
   }else{
        window.open(url,'_blank');
   }
}

This can be helpful :)

Answer 5

The most reliable solution for me was a combination of at Platform's .is() method and its promise result. I used the check inside a provider, so I could use it globally. Maybe the approach is useful to someone who has exhausted the other paths.

import { Platform } from 'ionic-angular';

constructor(public platform: Platform) { 

  public env:string = 'dev';

  this.platform.ready().then((readySource) => {

    if (readySource) {
      if (platform.is('core') || readySource.toLowerCase() !== 'cordova') {
        this.env = 'dev';
      }
      else {
        this.env = 'production';
      }
    }

Answer 6

Base on hhung, because core only detect if you are using a windows browser opening the application, but if you are using chrome mobile emulation, core will return false, but mobileweb will return true. Therefore you should use the following:

if(this.platform.is('core') || this.platform.is('mobileweb')) {
  this.isApp = false;
} else {
  this.isApp = true;
}