如何确定当前平台是 Capacitor 中的本机应用程序还是 Web？

Posted 2023-02-19

【中文标题】如何确定当前平台是 Capacitor 中的本机应用程序还是 Web？

【英文标题】：How can I determine if the current platform is a native app or web in Capacitor?

【发布时间】：2020-01-04 19:24:42

【问题描述】：

在 Cordova 中，您可以立即访问 process.env.CORDOVA_PLATFORM 在 Capacitor 中是否有类似的东西？

我希望在启动时有条件地加载一些函数，并且不想阻止渲染等待异步 Device.getInfo 回来。

例如，我想立即确定是否要导入一个脚本来进行本机键盘修改，但如果我们在 web 上运行，我不想导入此脚本

try 
  const  Keyboard  = Plugins
  Keyboard.setAccessoryBarVisible( isVisible: true )
 catch (error) 
  // Keyboard isn't available on web so we need to swallow the error

我正在使用 vue-cli

【参考方案1】：

到目前为止的答案都是正确的，如果您查看 Capacitors 源代码，有几种方法可以使用（但目前没有记录）：

Capacitor.getPlatform(); // -> 'web'、'ios' 或 'android' Capacitor.platform // -> 'web'、'ios' 或 'android'

（已弃用）

Capacitor.isNative // -> 对或错

请注意，Capacitor.isPluginAvailable('PluginName'); 方法仅在插件可用或不可用时返回（显然）但在这里很重要，它不会告诉您，在检查可用性后要执行的方法是否适用于您的可用平台.

电容器插件的文档尚未完成。

示例（代码），用于插件StatusBar：

// Native StatusBar Plugin available
if (Capacitor.isPluginAvailable('StatusBar')) 

    // Tint statusbar color
    StatusBar.setBackgroundColor(
        color: '#FF0000'
    );

这会在 iOS 上导致错误，因为该方法在 iOS 上不可用，但在 Android 上它目前运行良好。

这意味着，您需要自己（目前）实施插件和平台组合的检查，这可能会在未来由 Ionic / Capacitor 本身改进。

类似：

// Native StatusBar available
if (Capacitor.getPlatform() === 'android' && Capacitor.isPluginAvailable('StatusBar')) 

    // Tint statusbar color
    StatusBar.setBackgroundColor(
        color: this.config.module.GYMY_MODAL_STATUSBAR_HEX_STRING
    );

还有一件事，您无法检查该方法是否存在于该插件中（对于上面的代码setBackgroundColor），因为它可用，但在平台上抛出错误（Error: not implemented），这不支持。

希望我能帮助你们中的一些人。

干杯 未知0wn0x

【讨论】：

解释得很好。尽管正确的答案使捆绑更有效，但恕我直言，这种解释更有效。

【参考方案2】：

从 Capacitor 3 开始，您可以使用以下方法来确定它是否在本机设备（“iOS”-“Android”）上运行（“web”）。

import  Capacitor  from '@capacitor/core';
if(Capacitor.isNativePlatform()) 
    // Platform is mobile
 else 
    // Platform is not mobile

官方文档链接。 https://capacitorjs.com/docs/core-apis/web#isnativeplatform

【参考方案3】：

还有 Capacitor.isNative 属性，您可以使用它来确定 WebApp 是在 Capacitor 中运行还是在 Web 中运行。

https://github.com/ionic-team/capacitor/blob/master/core/src/definitions.ts

更新：在 Capacitor V3 中，您可以为此使用 Capacitor.isNativePlatform()。 https://capacitorjs.com/docs/v3/core-apis/web#isnativeplatform

【参考方案4】：

我想说 Device.getInfo() 是在基于电容器的项目中检查设备平台的唯一可靠方法。

由于 getPlatform() 的实现，Capacitor.platform 是基于 ui 客户端的用户代理。这意味着，如果您在 Web 上打开应用并选择开发人员工具，然后选择移动视图，在这种情况下，它会将您的平台识别为 ios 或 android，具体取决于您在开发工具中选择的平台而不是“web”

【讨论】：

你确定“Capacitor.platform 是基于 ui 客户端的用户代理”。 ?因为当我在开发工具中使用任何移动模拟器时，我仍然拥有等于web 的平台。所以这意味着 Capacitor.platform 是可靠的，不是吗？

据我所知，Capacitor.Platform 使用的是用户代理。参考：github.com/ionic-team/ionic-framework/blob/master/core/src/…

【参考方案5】：

您可以在此处查看官方文档中的所有内容：https://capacitorjs.com/docs/basics/utilities#getplatform

if (Capacitor.getPlatform() === 'ios') 
  // do something


if (Capacitor.isNative) 
  // do something

【参考方案6】：

发现它没有记录：Capacitor.platform

Capacitor.platform 可以是例如 web ios android

此外，如果您想知道在加载 Capacitor 之前是否在本地运行，即您想通过在 Web 上不包含 Capacitor 来减小捆绑包大小。

window.origin.includes('capacitor://')

【讨论】：

@Andreas 鉴于这个问题，它看起来像是答案（毕竟这是 OP），尽管更多的详细说明会使它更有用

window.origin.includes('capacitor://') 在我的 Android 电容器构建（电容器 3.0.2）上评估为 false。

在 Android 电容上运行 http://localhost 而在 iOS 上运行 capacitor:// 所以 window.origin.includes 将无法跨平台运行

【参考方案7】：

您现在可以使用Capacitor.isPluginAvailable('plugin name') 进行此检查，例如：

import  Capacitor, Plugins  from '@capacitor/core';
const  Keyboard  = Plugins;
...
const isAvailable = Capacitor.isPluginAvailable('Keyboard');

if (isAvailable) 
  Keyboard.setAccessoryBarVisible( isVisible: true )