How to detect platform using Ionic 4

Darshana picture Darshana · Aug 13, 2018 · Viewed 9.1k times · Source

How to detect browser and mobileweb platform using Ionic 4 because when I tried with below code in desktop browser it is not falling in ‘core’ condition.

if (this.platform.is('core')) {
    alert('core platform');
  } else {
    alert('something else');
  }

When I have debug in chrome developer tool it showing 'android' platform as per below snapshot.

enter image description here

Can anyone please help me how to detect platform in Ionic 4 or what can be the alternative for this?

Answer

Leonel Elimpe picture Leonel Elimpe · Jan 28, 2020

For my use case I wanted something to distinguish between native and browser platforms. That is, is my app running in a browser or a native mobile device. Here's the service I came up with:

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


type CurrentPlatform = 'browser' | 'native';

@Injectable({
  providedIn: 'root'
})
export class CurrentPlatformService {

  private _currentPlatform: CurrentPlatform;

  constructor(private platform: Platform) {
    this.setCurrentPlatform();
  }

  get currentPlatform() {
    return this._currentPlatform;
  }

  isNative() {
    return this._currentPlatform === 'native';
  }
  isBrowser() {
    return this._currentPlatform === 'browser';
  }

  private setCurrentPlatform() {
    // Are we on mobile platform? Yes if platform is ios or android, but not desktop or mobileweb, no otherwise
    if (
        this.platform.is('ios')
        || this.platform.is('android')
        && !( this.platform.is('desktop') || this.platform.is('mobileweb') ) ) {
      this._currentPlatform = 'mobile';
    } else {
      this._currentPlatform = 'browser';
    }
  }
}