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

Question

在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。

- Titan

Answer 1

到目前为止，所有的答案都是正确的。如果您查看电容器的源代码，有几种可用的方式（目前未记录），可以使用：

• Capacitor.getPlatform(); // -> 'web'、'ios'或'android'
• Capacitor.platform // -> 'web'、'ios'或'android' (已弃用)
• Capacitor.isNative // -> true或false

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

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

示例（代码）：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）。

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

干杯 Unkn0wn0x

- Unkn0wn0x

---

讲解得非常清晰。尽管正确的答案可以使捆绑更有效率，但我认为这个解释更加合理。 - Rip3rs

我同意，但是我认为提到如何导入 Capacitor 会很有帮助。 这样写：import { Capacitor } from '@capacitor/core'; - Brhaka

Answer 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

- Ibrahim Awad

Answer 3

还有一个属性Capacitor.isNative，您可以使用它来确定WebApp是在Capacitor还是Web中运行。 更新：在Capacitor V3中，您可以使用Capacitor.isNativePlatform()进行此操作。 参考链接：https://github.com/ionic-team/capacitor/blob/master/core/src/definitions.ts https://capacitorjs.com/docs/v3/core-apis/web#isnativeplatform

- laberning

Answer 4

发现它没有文档记录：Capacitor.platform

Capacitor.platform 可能是 web、ios 或 android 中的任何一个。

如果您想在加载 Capacitor 之前知道是否正在运行原生应用程序，例如，您希望通过不在 Web 上包括 Capacitor 来减少捆绑包大小。

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

- Titan

---

根据问题的描述，这似乎就是答案（毕竟这是提问者），但更详细的阐述会让它更有用。 - CertainPerformance

在我的 Android Capacitor 构建（capacitor 3.0.2）中，window.origin.includes('capacitor://') 的值为 false。 - Alex

在安卓上，Capacitor 运行在 http://localhost，而在 iOS 上则是 capacitor://，因此 window.origin.includes 不能跨平台使用。 - webdog

好的，可以假设Web应用程序生产部署不会在window.origin中有http://localhost，因此在这里有一些可能性来有效地针对这3个平台。在您的本地开发环境中，您也可以（应该）实现一个mywebsite.local域。无论如何，这仍然是有风险的，最好遵循其他答案。 - Kalnode

Answer 5

您现在可以使用Capacitor.isPluginAvailable('插件名称')进行此检查，例如：

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

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

- Brownoxford

Answer 6

你可以在官方文档中查看所有这些内容：https://capacitorjs.com/docs/basics/utilities#getplatform

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

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

- Sampath

Answer 7

我认为在基于 Capacitor 的项目中，Device.getInfo() 是检查设备平台的唯一可靠方式。

因为 getPlatform() 和 Capacitor.platform 的实现是基于 UI 客户端的用户代理。这意味着，如果您在 Web 上打开应用程序并选择开发人员工具，然后选择移动视图，在这种情况下，它会根据您在开发人员工具中选择的 iOS 或 Android 来识别您的平台，而不是“Web”。

- Parameshwar Ande

---

你确定 "Capacitor.platform 基于 UI 客户端的用户代理" 吗？因为当我在 dev-tools 中使用任何移动模拟器时，我的平台仍然等于 web。这意味着 Capacitor.platform 是可靠的，对吧？ - Stephane L

据我所知，Capacitor.Platform使用useragent。参考：https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/platform.ts - Parameshwar Ande

Answer 8

Capacitor.isNativePlatform()

这个函数返回一个布尔值，用于判断平台是否为原生平台。

Android和IOS返回true。

否则返回false。

- simon