How to determine if browser or app

#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.

#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

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

#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