在安卓中检测Web应用是否被添加到主屏幕书签

Question

我建立了一个响应式网页应用，利用了一些简单的HTML和jQuery。当应用在移动浏览器中加载时，调用了Bootstrap的modal()函数，显示一个简单的“添加到主屏幕”的消息。

对于iOS，我可以通过以下代码片段检查是否从主屏幕书签初始化Web应用程序：

  if(!window.navigator.standalone){
    $('#app-bookmarker').modal(); // popup the bookmark text
  }

如果是这样，modal()函数不会被调用，因此没有弹出窗口。

我正在努力寻找一种简单的方法来实现Android的相同过程，有人做过类似的事情吗？目前的问题是即使将其加入书签，弹出窗口仍将继续显示。

- williamsowen

Answer 1

您可以像这样在JavaScript中检测网站是否已添加到主屏幕：

您可以使用以下代码：

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log("Thank you for installing our app!");
}

更多信息请参考官方Google开发者文档：https://developers.google.com/web/updates/2015/10/display-mode

该文档涉及IT技术相关内容，介绍了有关显示模式的信息。如需详细了解，请点击以上链接查看。

- Giorgio

---

如果您正在使用全屏模式，则返回 window.matchMedia('(display-mode: fullscreen)').matches。 - Alex Cory

Answer 2

很遗憾目前看起来你不能这样做。如果你查看Chrome开发者页面的安装到主屏幕（https://developer.chrome.com/multidevice/android/installtohomescreen），有一个FAQ说明目前不可能。

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

“你不能直接这样做。”

编辑：实际上，如果你为应用程序创建一个manifest.json文件，可以指定一个start_url参数，请参见https://developer.chrome.com/multidevice/android/installtohomescreen#supporting 感觉有点hacky，但是你能否将查询字符串附加到该URL上，例如?fromhomescreen=yes？这样你就可以根据此来确定是否显示弹出窗口。

- Paul