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);

与此处相同：Detect if iOS is using webapp

Answer 3

对于IOS，我们有window.navigator.standalone属性来检查..

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

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

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

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

Home Screen Web Apps for Android Thanks to Chrome 31

Answer 4

使用IOS，独立和Web模式的localstorage不同。使用Android KitKat和Chrome，当您在网络版本的localstorage中保存值时，您就可以在独立模式下检索它。

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

我在几台设备上试过了。

Answer 5

一个古老的问题，但目前针对Chrome Android提供了明显更好的解决方案。

其中一种方式（最干净的IMO）。您可以使用＆＃39; start_url＆＃39;添加Web App Manifest。带有一个值的键，用于将查询字符串参数添加到常规主页。

例如： - 如果主页网址为https://www.example.com。在Web App Manifest中设置

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

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

Answer 6

对于谷歌浏览器（Android）从版本39开始使用Web应用程序清单（json）以及万一，它是一个单页应用程序，我使用这个＆＃39;技巧＆＃39;：

在manifest.json中我放了："start_url": "standalone.html"。

通常情况下（在我的情况下是index.html），但是从index.html我制作了一个相同的克隆：standalone.html（或者你喜欢的任何东西）。

然后，要检查，我使用这样的Javascript：

var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
    console.log("app is running standalone");
} else {
    console.log("app is running in normal browser mode");
}

有效。

使用此元标记在谷歌浏览器（移动版）31-38中也可能有效：

<meta name="application-url" content="http://my.domain.com/standalone.html">。尚未测试。

Answer 7

要检测它是否正在MIT AI2 Webview上运行：

if (typeof window.AppInventor!="undefined") { return true; }

Answer 8

您必须使用window.navigator.standalone，此API仅适用于移动IOS野生动物园，而不适用于Macbook或iMac的野生动物园...

Answer 9

在Android上没有“正确”的方法，因此还没有API支持。我们在公司使用的解决方法 -

首次登录时，将screenheight存储在localstorage中。通过screenHeight我的意思是在页面加载之前的document.documentElement.clientHeight，从那时起doc增长并且它不能准确衡量实际可用的屏幕高度。
每当用户下次登录时 - 检查当前屏幕高度与已存储 - 如果它变大，则用户已全屏显示。

如果您存储屏幕高度的第一时间值，则没有可以变小的情况。

警告 - 将清理现金的用户。我们选择忽略这一点，因为大多数用户不这样做或者相对很少这样做，并且在我们看来已经足够了一段时间，直到有针对此的API修复（希望会有:)）

选项b - 检查可用的屏幕高度与设备屏幕高度，一些测试设备的匹配＆amp;浏览器模式显示了一些模式（webapp中的可用高度<70） - 我坚信更广泛的比较可以获得足以满足90％的90％设备的值。

所有这一切都是一种解决方法，当然，我不是假装它是一种稳定的稳定方式来获得所需的功能 - 但对我们来说它有用，所以我希望这能帮助其他人解决这个问题（不能打电话给失去这样的关键） api功能其他方式）。祝你好运：） enter image description here

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

9 个答案: