How to determine if browser or app

Ionic Framework ionic-v3
1

I have some elements I want to show only if the page is viewed via browser (desktop or mobile browser), but not if viewed from within the app as installed via app store/google play.

From the docs: https://ionicframework.com/docs/api/platform/Platform/
I assumed I could use:
this.platform.is('core') || this.platform.is('mobileweb')

This works fine for desktop browsers, however on chrome and the default android browser it acts just like the app - the detected platforms are identical as [‘cordova’, ‘android’, ‘mobile’]

I understand the app itself is a browser, but I was under the impression ‘mobileweb’ would be the difference and it’s not. Any way to properly determine if I’m in a native browser or in the app?

4 Likes
2

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;
}
6 Likes
3

That’s what I’m using, but it’s failing for Chrome on android, and the default android browser. ‘mobileweb’ is not in the platforms array, nor is ‘core’. The platforms array is ‘cordova’, ‘android’, and ‘mobile’ which is the same as the app.

4

What you are saying is if you use it in a browser on an android device, it detects that you are an APP?

5

Yes, that is correct.

6

I’ve checked and rechecked this, is it a bug?

7

Could you create a minimal repro project of this, upload it to Github and also upload the .apk and host it somewhere so other people can check? I don’t think it should be that way…

8

@Sujan12 Here you go: https://github.com/beck24/ionic-platform-test

The web app is up at: https://beck24.github.io/

On my way out, can build an apk later, but you don’t really need that to see platform list when viewing it on a mobile browser.

Native Android browser, Chrome on Android

image
Screenshot_20170506-133410.png1080×1920 68.1 KB

And on Desktop - works as expected

image
Screen Shot 2017-05-06 at 1.41.47 PM.png493×674 19.3 KB

2 Likes
9

Interesting, same for iOS, Safari:

cordova, mobile, ios, iphone

10

I think the problem is here:

Can only be “mobileweb” if there is no “cordova”- which means it isn’T build for platform browser, but copying the content of /www. Does this makes sense?

2 Likes
11

Ok cool, so that explains the what. I don’t know the platform well enough to know if that’s intended behavior. Given this though, is there a way to differentiate between the app version and a mobile browser?

12

In case anyone else needs to do this the solution I’ve settled on is a pretty simple.

It seems that the apps (both android and ios at least) serve from the file:// protocol so

this.isApp = !document.URL.startsWith('http');
12 Likes
13

That is a nice workaround.

Created a ticket for this here:

1 Like
14

A related issue - chrome on iOS is returning only ‘core’ as the platform. See screenshot below. Any ideas why or a workaround.

I am trying to determine if the site is running on a desktop vs a mobile device. It works fine on safari and chrome on android. For some reason chrome on iOS returns core.

IMG_6311|281x500

15

Please create an issue about this here: https://github.com/ionic-team/ionic/issues Include the screenshot and a bit of description what code you are executing. Thanks.

As a solution, you might want to look at the underlying code and see if you can copy some into your .ts file and make it react to Chrome iOS correctly.

16

Hmm, with the WKWebView my above workaround doesn’t work anymore as ios uses http://localhost:8080 to serve from.

So the less nice thing can still be done like this

this.isApp = (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080'));

It works so long as your local ionic serve doesn’t use the same port :slight_smile:

7 Likes
17

Thnx for it, it was really needed…

18

great !!! worked like charm !!! thank you :slight_smile:

19

Thats nice, I’ve added this to difference between browser and electron

public isBrowser() {
return (this._platform.is(‘core’) || this._platform.is(‘mobileweb’)) && this.hasHttp();
}

public isDesktop() {
    return this._platform.is('core') && !this.hasHttp();
}
1 Like
20

String.startsWith is unsupported in IE. I recommend using indexOf instead:

const isApp = document.URL.indexOf('http') !== 0;