Android 如何检测 Web 应用程序是否在 Chrome 移动设备上独立运行

How to detect if web app running standalone on Chrome mobile

提问by mike nelson

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standaloneso you can't detect whether you are running as a standalone app.

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

The referencesays:

参考文献说：

How can I detect if the app is running as an installed app?

You can't, directly.

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

你不能，直接。

Notice it says "directly". My question is can we do it indirectly? Is there some tricky way to make an educated guess?

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

回答by josemmo

This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution.

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

Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:

最近 Google 实现了 CSS 条件display-mode: standalone，因此有两种可能的方法来检测应用程序是否独立运行：

Using CSS:

使用 CSS：

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

Using both CSS and Javascript:

使用 CSS 和 Javascript：

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

If you need more information, Google Developers has a page dedicated to this topic: https://developers.google.com/web/updates/2015/10/display-mode

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

回答by Javan R.

iOS and Chrome WebApp behaves different, thats the reason i came to following:

iOS 和 Chrome WebApp 的行为不同，这就是我开始关注的原因：

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

Same as here: Detect if iOS is using webapp

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

回答by murli2308

For the IOS we have window.navigator.standaloneproperty to check..

对于 IOS，我们有window.navigator.standalone要检查的属性。

But for Chrome on Android, it doesn't support this property. Only way to check this is by calculating screen width and height.

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

Below is the code to check that:

以下是用于检查的代码：

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

I got reference from below link:

我从以下链接获得参考：

Home Screen Web Apps for Android Thanks to Chrome 31

由于 Chrome 31，Android 的主屏幕网络应用程序

回答by utkarshmail2052

An old question but significantly better solutions available today for Chrome Android.

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

One of the ways(cleanest IMO). You may add Web App Manifest with a 'start_url' key with a value that adds a query string parameter to your usual homepage.

其中一种方式（最干净的 IMO）。您可以使用“start_url”键添加 Web App Manifest，该键的值会向您常用的主页添加查询字符串参数。

ex:- if homepage url is https://www.example.com. in Web App Manifest set

例如：- 如果主页 url 是https://www.example.com。在 Web 应用程序清单集中

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

Google's guide about Web app manifest:https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

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

回答by yoandm

With IOS, localstorage for the standalone and web mode are different. With android KitKat and Chrome, when you save a value in localstorage on the web version, you're able to retrieve it in standalone mode.

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

So, you just have to save document.documentElement.clientHeight to localstorage when user is browsing the web version (before adding to homescreen). Then, just compare the current value of document.documentElement.clientHeight with localstorage value. If the current value is >, it's standalone mode.

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

I tried it on several devices.

我在几个设备上尝试过。

回答by Klaus

For Google Chrome (Android) from version 39 onwards with web application manifest (json) and in case, it is a single page application, I use this 'trick':

对于带有 Web 应用程序清单 (json) 的 39 版及更高版本的 Google Chrome (Android)，如果它是单页应用程序，我会使用以下“技巧”：

In the manifest.json I put: "start_url": "standalone.html".

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

Normally it is (in my case index.html), but from index.html I make an identical clone: standalone.html (or whatever you fancy).

通常它是（在我的例子中是 index.html），但是从 index.html 我做了一个相同的克隆：standalone.html（或者你喜欢的任何东西）。

Then, to check, I use Javascript like this:

然后，为了检查，我使用这样的 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");
}

That works.

那个有效。

It might work too in Google Chrome (mobile) version 31-38 with this meta-tag:

它可能也适用于带有此元标记的 Google Chrome（移动）版本 31-38：

<meta name="application-url" content="http://my.domain.com/standalone.html">. Not tested, yet.

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

回答by Nezumi

To detect if it's running on MIT AI2 webview:

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

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

回答by a_m_dev

you have to work with window.navigator.standalone, this API is only works on mobile IOS safari, not event on your macbook or iMac's safari...

您必须使用window.navigator.standalone，此 API 仅适用于移动 IOS safari，不适用于您的 macbook 或 iMac safari 上的事件...

回答by Sergey Sob

There is no 'proper' way to do it on Android, hence no API support yet. The workaround we used in my company -

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

1. On first login, store screenheight in localstorage. By screenHeight i mean document.documentElement.clientHeight before page loads, since then doc grows and its not accurate measure for real available screen height.

2. Whenever user logs in next time - check current screenheight vs stored - if it becomes bigger, the user has gone fullscreen.

1. 首次登录时，将屏幕高度存储在 localstorage 中。通过 screenHeight 我的意思是在页面加载之前 document.documentElement.clientHeight，从那时起 doc 增长并且它不准确测量实际可用的屏幕高度。

2. 每当用户下次登录时 - 检查当前屏幕高度与存储的 - 如果它变大，则用户已全屏显示。

There is no scenario upon which it can become smaller, IF YOU DO store FIRST TIME value for screen height.

如果您确实为屏幕高度存储了 FIRST TIME 值，则没有任何情况下它会变小。

Caveat- user that will clean cash. We chose to ignore that, since most users don't do it or do it relatively rarely, and it will suffice(in our opinion) for some time until there will be API fix for this( hopefully there will be :) )

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

Option b - check available screenheight vs device screen height, the matchup for a few test devices & browser modes showed some pattern( available height < 70 in webapp) - i strongly believe a wider comparison can get values that will suffice for 90% of devices in 90% cases.

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

All of this is a workaround, of course, i m not pretending its a solid stable way to get to desired functionality - but for us it worked, so i hope this helps somebody else who fought this bug(cant call missing such crucial api feature other way). Good luck :)

所有这些都是一种解决方法，当然，我并没有假装它是获得所需功能的可靠稳定方式 - 但对我们来说它有效，所以我希望这可以帮助其他人与此错误作斗争（不能称之为缺少其他重要的 api 功能）道路）。祝你好运 ：）