如何检测Web应用程序是否在Chrome Mobile

Question

，因此您无法检测到您是否正在作为独立应用程序运行。

参考文献

说：

如何检测该应用程序是否作为安装应用程序运行？ 你不能直接

notice说“直接”。我的问题是我们可以独立地做吗？有一些棘手的猜测方法吗？

Google已实现了CSS条件

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

，因此有两种可能的方法可以检测应用程序是否独立运行：

使用CSS：

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

使用CSS和JavaScript：

Answer 1

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

如果您需要更多信息，则Google开发人员有一个专门针对此主题的页面：

https：//developers.google.com/web/updates/2015/10/10/display-mode

IOS和Chrome WebApp的行为与众不同，这就是我遵循的原因：

window.navigator.standalone在此处标记：

进行iOS，如果iOS正在使用webapp

Answer 2

对于iOS，我们有

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

属性要检查..但对于Android上的Chrome，它不支持此属性。检查此问题的唯一方法是计算屏幕宽度和高度。 below是检查的代码：

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

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

Answer 3

home屏幕屏幕网络应用程序，感谢Chrome31

ios，独立的局部存储和Web模式不同。使用Android Kitkat和Chrome，当您在Web版本上保存localstorage的值时，您可以在独立模式下检索它。

因此，您只需要在用户浏览Web版本时（在添加到HomeScreen之前）时将文档保存到LocalStorage中。然后，只需将document.documentelement.clientheight的当前值与localstorage值进行比较。如果当前值为>，则是独立模式。 我在多个设备上尝试了它。

一个古老的问题，但今天可以为Chrome Android提供更好的解决方案。

一种方式（最清洁的IMO）。您可以使用一个“ start_url”键添加Web应用程序清单，其中一个值将查询字符串参数添加到通常的主页上。

EX： - 如果主页URL为

https：//www.example.com

。 在Web应用程序清单中设置 "start_url": "standalone.html"

关于Web应用程序清单的Google指南：

Answer 4

对于Google Chrome（Android），版本39与Web Application清单（JSON）开始，如果它是一个页面应用程序，我使用此“技巧”：

在清单中。

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

Answer 5

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

工作 使用此元标记：

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

在Android上做到这一点不是“正确的”方法，因此尚无API支持。 我们在公司中使用的解决方法 -

在第一次登录时，将ScreenHeight存储在LocalStorage中。 通过ScreenHeight，我的意思是document.documentElement.ClientHeight页面加载之前，此后DOC增长了，并且对实际可用屏幕高度不准确。

Answer 6

当用户下次登录时 - 检查当前的ScreenHeight vs存储 - 如果它变大，则用户已全部完整。

如果您确实存储了屏幕高度的首次时间值，则没有可能会变小的情况。

 -caveat

-将清洁现金的用户。 我们选择忽略这一点，因为大多数用户不这样做或相对较少地这样做，并且（在我们看来）这足以解决此问题（希望有API解决）（希望会有:)）

option b-检查可用的ScreenHeight vs设备屏幕高度，一些测试设备和浏览器模式的比赛显示了一些模式（可用高度

当然，所有这些都是解决方法其他方式）。祝你好运：）

检测它是否在MIT AI2 WebView上运行：

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

您必须与

window.navigator.standalone

Answer 7