How to determine if browser or app

Ionic Framework ionic-v3
21

What I do and works perfectly is this:

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

22

Just to explain the logic behind the http trick, there are actually two scenarios that needs to be addressed separately:

  1. Developing and testing on browser
    $ ionic serve --lab

  2. Testing / Debug on cordova emulator using a ā€œbrowser deviceā€
    $ ionic cordova run browser

  • The second is needed to debug cordova plugins more efficiently then in real device, as they doesnā€™t exist on ionic serve, as its port can change, i suggest using :
    document.URL.startsWith(ā€˜http://localhost:80ā€™) instead of the full port.

  • As both of them run in browser, I suggest running ionic serve as local ā€œfakeā€ domain, registered in /etc/hosts
    such as dev.example.com pointing to local dev ip, in this case, the dev will not be identified as App.

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

23

Hello,
regarding the css depending on the platform,
if ios = .ios, android = md then desktop browser = ???

thank you in advance

24

Not sure I completely understand your question but if its running on desktop browser it will be ā€œcoreā€ which uses md (material design).

25

Iā€™ve added a check for Angular isDevMode() to your solution, this should be true if running ionic serve but false when running your app in production on a device (ionic cordova build ios --prod):

import { isDevMode } from '@angular/core';

 isApp(): boolean {
    return (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080') || isDevMode());
  }

Seems to be working for me so far, of course this will fail if you donā€™t do a --prod build for your web or app builds.

EDIT

Use the following for IE support as mentioned above:

import { isDevMode } from '@angular/core';

 isApp(): boolean {
    return (document.URL.indexOf('http') !== 0 || document.URL.indexOf('http://localhost:8080') === 0 || isDevMode());
  }

}

EDIT 2

Okay so those donā€™t actually work on Android as the webview serves the app on http://localhost and on iOS it seems to be served on ionic://localhost so here is my latest solution:

import { Injectable } from '@angular/core';

@Injectable()
export class EnvironmentProvider {

  public isApp(): boolean {
    return (
      document.URL.indexOf('http://localhost') === 0 || 
      document.URL.indexOf('ionic') === 0 || 
      document.URL.indexOf('https://localhost') === 0
    );
  }

  public isBrowser(): boolean {
    return !this.isApp();
  }

}

It should work on iOS 10+ using the cordova-plugin-ionic-webview and Android now.

1 Like
26

Donā€™t make it so complicated. The easiest an most common way:

if (this.platform.is(cordova)) {
   // App
}

if (!this.platform.is(cordova)) {
   // Probably Browser
}
27

@mariusbolik - thatā€™s not a reliable test for all cases, if you follow the thread from the beginning you will see that the browser build of my app (and potentially other peoples) uses cordova.

28

Iā€™ve found for me the most common way to check if the App runs in Browser (Dev) or on a Device (Dev / Prod). Since ionic serve runs locally with port 8100, we can check if this port is used / available.

You should not forget, that the location protocol on Android can be http too.

    /**
	 * @private
	 * @function isAppOnDevice
	 * @description Simply check, if the environment is a device or desktop browser
	 * @return {boolean}
	 */
	private isAppOnDevice(): boolean {
		if (window.location.port === '8100') {
			return false;
		} else {
			return true;
		}
	}

Or if you want to assign it to a var:

export const APP_IS_ON_DEVICE: boolean = !(window.location.port === '8100');

Hope it helps someone.

Cheers
Unkn0wn0x

1 Like
29

For some reason my app that was using the solution below has stopped working:

isApp(): boolean {
    return (document.URL.indexOf('http') !== 0 || document.URL.indexOf('http://localhost:8080') === 0);
  }

Now IĀ“m using your solution @ Unkn0wn0x and it works propertly, thank you so much!

30

i am using cordova.platformId for this.
this delivery ios, android or browser - depending on the case.

1 Like