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 want to just link to that page with target="_blank".

I am trying to reuse the Ionic 2 code as a Web App. So when I build the app, it will also work in browser desktop. So platform.ready() is not enough for me. As I need to know if user is on desktop browser and I can do something different.

Solution 1

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 :)

Solution 2

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.

Solution 3

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;
}

Solution 4

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

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

Solution 5

I have faced the same problem in an Ionic 3 application and found here a nice method of checking if the application runs in a browser vs. real device/emulator:

isApp = !document.URL.startsWith('http');

Basically it relies on the fact that real devices or emulators serve resources using file protocol rather than http, as used by the browsers.

View more solutions

Comments

[Johncl]

Does not work with the latest ionic2. It returns false on testing for 'core' if you put your Chrome desktop browser in mobile emulation.

[Juangui Jordán]

Should say "ios", not "ioson"

[carstenbaumhoegger]

yes doesn't work for me with RC3 when using mobile Chrome in desktop mode, too. Is there another solution for this?

[Kieran Ryan]

@johncl: then switch mobile emulation off :-)

[fifth]

not work anymore, I got mobile,ios,iphone,mobileweb when I ran app in chrome by serve command

[Blunderfest]

This won't work on iOS using the WKWebview plugin, which is about to be the default.