web-dev-qa-db-ja.com

Ionic 4を使用してプラットフォームを検出する方法

Ionic 4を使用してブラウザとモバイルウェブプラットフォームを検出する方法。デスクトップブラウザで以下のコードを試してみたところ、 'core'条件。

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

chrome開発者ツールでデバッグを行うと、以下のスナップショットのように 'Android'プラットフォームが表示されます。

enter image description here

Ionic 4でプラットフォームを検出する方法、またはこれに代わるものは何でしょうか？

angulartypescriptionic-frameworkionic4platform
5
Darshana

次のリンクが役立つ場合があります。
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;
    }
}
3
Pradnya Sinalkar

私のユースケースでは、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';
    }
  }
}
2
Leonel Elimpe

あなたが使用するロジックは正しいロジックです。

問題はionic 4にあり、間違った値を返しています。

バグはionic repo： https://github.com/ionic-team/ionic/issues/15165 に投稿されました

['Android']として登場するプラットフォームに関連する他の問題もバグであり、ここでも報告されています： https://github.com/ionic-team/ionic/issues/15051

1
ashfaq.p

Webプラットフォームを検出するには、Bowserを使用する必要があります。私はこれをionic 4で、ブラウザプラットフォーム、つまりサファリかクロームかを検出するために使用しました。

ステップ1：プロジェクトにクッパをインストールする必要があります

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（）を呼び出すことにより、現在のブラウザ名を知ることができます。

0
Tahseen Quraishi

現在、ionic 4はプラットフォーム検出をサポートしています。次のコードは私のために機能します。

this.platform.ready().then(() => {
      if (this.platform.is('Android')) {
        alert('Android');
      } else if (this.platform.is('ios')) {
        alert('ios');
      } else {
        // fallback to browser APIs
      }
    });
0
Đức Quang

Ionic-4プラットフォーム固有の値

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

プラットフォーム名|説明|

 * | 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.     |
0
Anand Acharya

イオン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になります。

0
Sampath