How to determine if browser or app


What I do and works perfectly is this:

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


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


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

thank you in advance


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


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.


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());



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

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.


Don’t make it so complicated. The easiest an most common way:

if ( {
   // App
if (! {
   // Probably Browser


@condacore - 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.


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.