如何检测在Chrome手机上独立运行的Web应用程序

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

参考文献说:

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

你不能,直接。

注意它说“直接”。 我的问题是我们可以间接做吗? 是否有一些棘手的方法来进行有根据的猜测?

Solutions Collecting From Web of "如何检测在Chrome手机上独立运行的Web应用程序"

这个答案带来了一个巨大的延迟,但我只是在这里发布它只是为了努力寻找解决scheme的其他人。

最近,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

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

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

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

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

我从下面的链接获得参考:

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

iOS和Chrome的Web应用程序的行为不同,这是我来到以下的原因:

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

和这里一样: 检测iOS是否使用webapp

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

所以,当用户浏览网页版本(添加到主屏幕之前),您只需将document.documentElement.clientHeight保存到本地存储。 然后,将document.documentElement.clientHeight的当前值与localstorage值进行比较。 如果当前值>,则它是独立模式。

我在几个设备上尝试过。

对于使用Web应用程序清单(json)从版本39开始的谷歌浏览器(Android),以及如果是单页面应用程序,我使用这个“技巧”:

在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"> 。 尚未testing。

一个古老的问题,但显着更好的解决scheme今天可用于Chrome Android。

其中一种方式(最干净的IMO)。 您可以添加一个带有“start_url”键的Web App Manifest,该键的值将查询string参数添加到您的常用主页中。

例如: – 如果网页的url是https://www.example.com 。 在Web应用程序清单集

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

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

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

  1. 首次login时,将screenheight存储在localstorage中。 通过screenHeight我的意思是document.documentElement.clientHeight页面加载之前,因为然后文档增长,它不是真正的可用屏幕高度的准确措施。

  2. 每当用户下次login时 – 检查当前screenheight vs stored – 如果变大,用户已经全屏。

如果您屏幕高度存储FIRST TIME值,则无法缩小。

警告 – 将清理现金的用户。 我们select忽视这一点,因为大多数用户不这样做,或者做得相对较less,而且在我们看来,这样做已经足够了,直到将来会有API修复(希望会有:))

选项b – 检查可用的screenheight vs设备的屏幕高度,几个testing设备和浏览器模式的匹配显示了一些模式(webapp中可用的高度<70) – 我坚信,更广泛的比较可以获得足够90%的设备在90%的情况下。

所有这些都是一个解决方法,当然,即使我不假装它是一个坚实的稳定的方式来获得所需的function – 但对我们来说,它的工作,所以我希望这可以帮助别人谁打这个bug(不能呼吁失踪这样的关键apifunction其他办法)。 祝你好运 :) 在这里输入图像说明