如何检测Chrome移动设备上是否独立运行网络应用

Question

Chrome移动版最近添加了添加到主屏幕的功能,类似于iOS.这很酷但它不支持它以及iOS - 它不支持window.navigator.standalone所以你无法检测你是否作为一个独立的应用程序运行.

参考文献说:

如何检测应用程序是否作为已安装的应用程序运行？

你不能,直接.

注意它说"直接".我的问题是,我们可以间接地做到吗？是否有一些棘手的方法来做出有根据的猜测？

Answer 1

这个答案带来了巨大的延迟,但我在这里只是为那些正在努力寻找解决方案的人发布.

最近Google已经实现了CSS条件display-mode: standalone,因此有两种方法可以检测应用程序是否独立运行:

使用CSS:

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

同时使用CSS和Javascript:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

如果您需要更多信息,Google Developers会有专门针对此主题的页面:https://developers.google.com/web/updates/2015/10/display-mode

Answer 2

iOS和Chrome WebApp的行为不同,这就是我接下来的原因:

isInWebAppiOS = (window.navigator.standalone == true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

与此处相同:检测iOS是否正在使用webapp

Answer 3

对于IOS,我们window.navigator.standalone有财产要检查..

但对于Android上的Chrome,它不支持此属性.检查这个的唯一方法是计算屏幕宽度和高度.

以下是检查以下内容的代码:

navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

我从下面的链接中得到了参考:

适用于Android的主屏幕Web应用程序感谢Chrome 31

Answer 4

对于 IOS，standalone 和 web 模式的 localstorage 是不同的。使用 android KitKat 和 Chrome，当您在 web 版本的 localstorage 中保存一个值时，您可以在独立模式下检索它。

因此，您只需在用户浏览网页版本时（在添加到主屏幕之前）将 document.documentElement.clientHeight 保存到 localstorage。然后，只需将 document.documentElement.clientHeight 的当前值与 localstorage 值进行比较。如果当前值为 >，则为独立模式。

我在几个设备上尝试过。

Answer 5

一个古老的问题，但今天可用于Chrome Android的解决方案明显更好。

方法之一（最干净的IMO）。您可以使用带有“ start_url”键的Web App Manifest添加该键，该键的值会将查询字符串参数添加到您的常规主页中。

例如：-如果首页网址为https://www.example.com。在Web App清单集中

    "start_url": "https://www.example.com/?user_mode=app"

Google关于网络应用清单的指南：https : //developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/