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

Question

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

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

例如，我想立即确定是否要导入进行本机键盘修改的脚本，但如果我们运行在网络上

，我不想导入此脚本

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

Answer 1

发现它没有记录：Capacitor.platform

Capacitor.platform 可以是 web ios android

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

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

Answer 2

还有属性 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

Answer 3

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

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

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

Answer 4

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

Capacitor.getPlatform(); // -> 'web'、'ios' 或 'android'
Capacitor.platform // -> 'web'、'ios' 或 'android' （已弃用）
Capacitor.isNative // -> 真或假

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

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

插件示例（代码）StatusBar：

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

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

}

这会在 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

Answer 5

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

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

if (Capacitor.isNative) {
  // do something
}

Answer 6

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

因为getPlatform()的实现，Capacitor.platform是基于ui客户端的用户代理。这意味着，如果您在网络和 select 开发人员工具上打开您的应用程序，然后 select 移动视图，在这种情况下，它会将您的平台识别为 ios 或 android，具体取决于哪个平台您 select 使用开发工具而不是 'web'

Answer 7

从 Capacitor 3 开始，您可以使用以下方法确定它是运行在本机设备上 ("iOS" - "Android") 还是 ("网站").

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

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

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

How can I determine if the current platform is a native app or web in Capacitor?

capacitor