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

Question

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

我希望在启动时有条件地加载一些函数，并且不想阻止渲染等待异步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 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

Answer 2

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

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

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

Capacitor Plugins 的文档尚未完成（尚未完成）。

示例（代码），对于插件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为fe ），因为它可用，但Error: not implemented在不支持它的平台上引发错误 ( )。

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

干杯 Unkn0wn0x

Answer 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

Answer 4

发现它没有记录： Capacitor.platform

Capacitor.platform 可以是例如 web ios android

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

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

Answer 5

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

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

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