Ionic 2：检查是否在浏览器环境中运行的最佳方法答案

【问题标题】：Ionic 2: best way to check if is running in browser environmentIonic 2：检查是否在浏览器环境中运行的最佳方法
【发布时间】：2017-03-21 22:11:47
【问题描述】：

我无法在文档中找到最好的方法来了解 Ionic 2 应用程序是在浏览器中（使用 ionic serve 命令）还是在设备中运行/模拟器。

其实我在做的是检查window对象是否有'plugins'属性，但不知道有没有最好的办法。

if(!window['plugins']) {
//browser
}

【问题讨论】：

How to detect if I am in browser (local development) in Ionic 2的可能重复

标签： javascript cordova ionic-framework ionic2

【解决方案1】：

哦，我在文档中找到了 Platform 对象，它有一些方法。 http://ionicframework.com/docs/v2/api/platform/Platform/ 一个是is(key)，可以匹配

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(platform: Platform) {
    this.platform = platform;
    ...
    if(this.platform.is('core')) {
     //it's in the browser
    }
  }
}

【讨论】：

这不是答案。虽然这将在“正常”浏览窗口中工作，但只要你打开开发工具并使用设备工具栏，ionic 就会认为你是一部手机。我还没有找到正确的答案。

【解决方案2】：

只是在上面给出的解决方案中再添加一点，以下似乎确实可以：

import { Platform } from 'ionic-angular';

@IonicPage()
@Component({})
export class WhichPlatformPage {
  isApp: boolean;

  constructor(private platform: Platform) {
    this.isApp = this.platform.is('core') || this.platform.is('mobileweb') ? false : true;
  }
}

ionViewDidLoad() {
  console.log(this.isApp ? 'Running from mobile' : 'Running from the browser');
}

这对我来说似乎工作正常 - 与上一个答案的主要区别是我们也在检查“mobileweb”平台。

有趣的是，如果您使用ionic cordova build browser 命令，'mobileweb' 会变成'mobile' - 破坏了这个解决方案 - 因为它试图尽可能地模拟在设备上。这是在 GitHub 上作为问题提出的：

https://github.com/ionic-team/ionic/issues/11557

给出了一个解决方案，将isApp设置为：

this.isApp = !document.URL.startsWith('http');

之所以有效，是因为移动应用程序以“文件”协议开始其页面。但是，如果您阅读了该问题，Ionic 实际上目前建议不要使用cordova 浏览器平台，因此您最好使用原始解决方案。

【讨论】：

【解决方案3】：

虽然问题有点陈旧但仍然有效 - 另一种选择是使用 https://ionicframework.com/docs/native/device/ - Device 对象提供platform 属性，该属性等于浏览器上的'browser'。该插件仅在通过 cordova 运行 webapp 时可用。

【讨论】：

【解决方案4】：

我想我会更新一个有效的答案，以防有人遇到这个问题。

这适用于最新的 iOS 和 Android 版本：

public isApp(): boolean {
    return (
      document.URL.indexOf('http://localhost') === 0 || // Android
      document.URL.indexOf('ionic') === 0 || // iOS 11+ Ionic Web View
      document.URL.indexOf('https://localhost') === 0 // iOS 10 Ionic Web View
    );
  }

有关更多信息和注意事项，请参阅 Ionic Webview 自述文件。

【讨论】：

【解决方案5】：

我在正在使用的 Ionic 论坛中发现了这个解决方案

this.isApp = (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080'));

尽管随着 ios/androd 新版本的到来，它可能会在未来的版本中发生变化详细讨论https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/15

【讨论】：