Ionic 5 / Capacitor：如何确定应用程序是在浏览器中运行还是编译为本机应用程序？

Posted 2023-02-19

【中文标题】Ionic 5 / Capacitor：如何确定应用程序是在浏览器中运行还是编译为本机应用程序？

【英文标题】：Ionic 5 / Capacitor: How to find out if app is running in browser or compiled as native app?

【发布时间】：2021-03-13 13:15:29

【问题描述】：

我只想知道，我的 Ionic 5 应用程序是在浏览器中运行，还是在已编译应用程序的 web 视图中运行。

平台不起作用：https://ionicframework.com/docs/angular/platform 它只是讲述了设备。但是当我在 android 设备上的 chrome 中运行它时，它返回的平台与我编译运行它时的平台相同。

分析 URL 以检查 webview url 是否有效，但在使用电容器实时重新加载时无效。因为它与浏览器中的本地 URL 相同。顺便说一句，分析 URL 感觉就像一个丑陋的解决方案。

获取这些简单而重要的信息真的有那么难，还是我错过了什么？

编辑： 平台输出 带有离子服务的 Ubuntu 中的 Chrome：["desktop"] Android 中的 Chrome：["android", "mobile", "mobileweb"] 带电容 livereload 的 Android：["android", "phablet", "mobile", "mobileweb"] Android 编译：["android", "phablet", "cordova", "capacitor", "mobile", "hybrid"]

【问题讨论】：

您好！您能否添加在两种情况下调用platforms() 方法（ionicframework.com/docs/angular/platform#platforms-string-）的结果？该方法返回一个平台列表，因此查看是否有任何差异（或者 Ionic 中是否存在错误）会很有用。

将其添加到原始帖子中。我认为 livereload 应该输出“电容器”，对吧？然后我有一个属性来区分。

不是真的，我认为只有在移动设备上本地运行时才会返回电容器（livereload 有点棘手，因为它只在开发期间使用）。但是你仍然可以使用类似const isBrowser = platform.is('mobileweb') || platform.is('desktop') 的东西，它应该可以工作，对吧？这样您就可以知道应用是在本地运行还是在浏览器中运行。

但是带有 livereload 的电容器也给了我“mobileweb”。我认为电容 livereload 的原因是，我可以通过 live reload 测试本机应用程序。如果不是这种情况，我为什么要使用它？对于浏览器测试，我有离子服务。

这是个好问题。在 Capacitor docs 中提到 ionic capacitor run 将执行以下操作：执行 ionic 构建（或使用 --livereload 选项从 ionic serve 运行开发服务器）。所以实时重新加载标志只会在设备上运行开发服务器。我不经常使用它，但我想它在处理 ios 和顶部/底部安全区域插图时很有用。能否请您在使用 livereload 时调用原生插件看看会发生什么？

【参考方案1】：

检查Capacitor.getPlatform() 如果返回 web 则作为网站运行，如果返回 ios 或 android 则为原生。

或者也可以查看Capacitor.isNativePlatform()。

https://capacitorjs.com/docs/core-apis/web#getplatform

【讨论】：

它不在 livereload 模式下。这就是讨论（见上文）。我在基本问题中提到过。

这与离子平台不同，您在问题的任何地方都没有提到 Capacitor.platform

啊，谢谢。没有正确阅读。这行得通！也许您可以将文档链接添加到您的答案中：capacitorjs.com/docs/basics/utilities#getplatform