Как определить платформу с помощью Ionic 4

Для моего варианта использования я хотел что-то, чтобы различать платформы native и browser. То есть мое приложение работает в браузере или на родном мобильном устройстве. Вот сервис, который я придумал:

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

В настоящее время Ionic 4 поддерживает определение платформы. Следующий код работает для меня.

import { Platform } from '@ionic/angular';
...
constructor(private platform: Platform) {}
...
ngOnInit() {
   this.platform.ready().then(() => {
      if (this.platform.is('android')) {
           console.log('android');
      } else if (this.platform.is('ios')) {
           console.log('ios');
      } else {
           //fallback to browser APIs or
           console.log('The platform is not supported');
             }
      }}

Вам может помочь следующая ссылка:
https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/16

или вы можете использовать следующий метод:

public isDesktop() {
    let platforms = this.plt.platforms();
    if(platforms[0] == "core" || platforms[0] == "mobileweb") {
        return true;
    } else {
        return false;
    }
}

Значение для платформы Ionic-4

goto- node_modules@ionic\angular\dist\providers\platform.d.ts

     Platform Name   | Description                        |
 * | android         | on a device running Android.       |
 * | cordova         | on a device running Cordova.       |
 * | ios             | on a device running iOS.           |
 * | ipad            | on an iPad device.                 |
 * | iphone          | on an iPhone device.               |
 * | phablet         | on a phablet device.               |
 * | tablet          | on a tablet device.                |
 * | electron        | in Electron on a desktop device.   |
 * | pwa             | as a PWA app.                      |
 * | mobile          | on a mobile device.                |
 * | desktop         | on a desktop device.               |
 * | hybrid          | is a cordova or capacitor app.     |

Используемая вами логика является правильной логикой.

Проблема связана с ionic 4, и он возвращает неправильные значения.

Ошибка была опубликована в репозитории ionic: https://github.com/ionic-team/ionic/issues/15165

Другая проблема, связанная с появлением платформы ['android'], также является ошибкой, и о ней также сообщалось здесь: https://github.com/ionic-team/ionic/issues/15051

Для определения веб-платформы следует использовать Bowser . Я использовал это в ionic 4 для определения платформы браузера, т. е. будь то сафари или хром.

Шаг 1: Вам необходимо установить Bowser в свой проект.

npm install [email protected] --save-exact

Шаг 2: Затем вам нужно импортировать его на страницу .ts, где вы хотите его использовать. допустим home.ts

import Bowser from "bowser";

Шаг 3: Затем вам нужно написать логин, чтобы проверить платформу браузера внутри функции в home.ts.

checkBrowserPlatform() {
  const browser = Bowser.getParser(window.navigator.userAgent);
  const browserName = browser.getBrowserName();
    console.log(browserName);
  }

Вызвав checkBrowserPlatform(), вы можете узнать имя текущего браузера.

Ионный 4 / Конденсатор

Я написал такой сервис:

detect-platform.service.ts

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

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

    isDevice: boolean = false;

    constructor(
        private platform: Platform, ) { }

    setPlatform(): void {

        const platforms: string[] = this.platform.platforms();
        const platform: string = find(platforms, (p: string) => {
            return p === 'capacitor';
        });

        this.isDevice = platform ? true : false;
    }   

}

Примечание. Поскольку я использую Ionic 4/Capacitor, он дает true, если он находится на device, иначе false.

Если кто-то все еще борется с этим на ionic4/cordova, я решил это, используя

import {Device} from '@ionic-native/device/ngx'

Просто добавьте его в свой app.modules и запустите this.device.platform везде, где вам нужно, чтобы узнать, дать представление о выводе в Интернете и apk из этого простого кода.

console.log(this.platform.platforms());
console.log(this.device.platform);

это:

Running on web (desktop and mobile)
["android", "phablet", "cordova", "mobile", "hybrid"]
browser

Running android local (apk)
["android", "cordova", "desktop", "hybrid"]
Android

Теперь я могу правильно использовать плагины для браузера или мобильного устройства, в моем случае это загрузка и обрезка изображения.

Полное объяснение можно найти по адресу https://www.damirscorner.com/blog/posts/20171124-DetectingWhereIonicAppIsRunning.html