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

37

votes

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.

cordovaionic-frameworkionic2

68

votes

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

24

votes

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.

9

votes

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

9

votes

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

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

5

votes

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.

2

votes

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

0

votes

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.

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

7 Answers