Damir's Corner.

Detecting Where Ionic App is Running

Ionic framework (as well as Cordova, which it is based on) do a great job at abstracting away the details about the platform that the application is currently running on. There are ways to get that information from Cordova, but it's important to understand what exactly the values returned mean.

Platform Service

Ionic's Platform service is probably the most obvious way to get information about the current platform. Although it works, there is no way to determine whether the code is currently running as a mobile app or as a web site.

To test the behavior, I modified the default blank application to print out the list of all detected platforms:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    platforms: Array<string>;

    constructor(platform: Platform) {
        this.platforms = platform.platforms();
    }
}

<ion-content padding>
    <div>
        Platforms: <span *ngFor="let platform of platforms">{{platform }}</span>
    </div>
</ion-content>

After I built and ran the Android app, the results were more or less as expected:

Platforms: cordova mobile android phablet

Unfortunately, if I built the same project for the browser platform and opened the site in a browser on an Android phone, the results were almost the same:

Platforms: cordova mobile android

This approach is useful, when you want to now what type of device the pages are viewed on, but you don't care how the project was built: whether it is an app or a website. It is used by Ionic to apply the styles based on the platform, so that the appearance will be tailored for Android and iOS even when pages are served as a website.

Device plugin

To determine which platform the project was built for (e.g. to replace native plugins with different pages in a browser), Device plugin for Cordova can be used. Of course, there's also an Ionic Native plugin available for it.

I did a similar test to display the platform value in both cases:

import { Component } from '@angular/core';
import { Device } from '@ionic-native/device';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    devicePlatform: string;

    constructor(device: Device) {
        this.devicePlatform = device.platform;
    }
}

<ion-content padding>
    <div>
        Platform: {{devicePlatform}}
    </div>
</ion-content>

In the Android app, the output was similar as before:

Platform: Android

However, when built for the browser platform and opened in an Android browser, the result was different:

Platform: browser

In this case, there is a clear distinction between a browser build and an android build. It doesn't matter, which device the browser is running on.

Ionic Serve

Until now, I have only explored the cases when the application is built using Cordova. Ionic provides another way to run the application during development - using ionic serve.

In this case, Cordova isn't initialized at all, therefore the Device plugin can't be used. The Platform service will still work, though. With the test code above, the output will be:

Platforms: mobile android mobileweb

Notice that cordova is missing from the value list this time. This is a good criterion to recognize when the running application is in development mode and wasn't properly built. It's a good idea to mock Cordova plugins in this case to make the application work, as they would all fail otherwise.