检测 Web 应用程序是不是是 Android 主屏幕的书签

Posted 2023-05-06

【中文标题】检测 Web 应用程序是不是是 Android 主屏幕的书签

【英文标题】：Detecting if a web app is bookmarked to homescreen in Android检测 Web 应用程序是否是 Android 主屏幕的书签

【发布时间】：2015-04-29 16:00:57

【问题描述】：

我已经构建了一个响应式网络应用程序，它使用了一些简单的 html 和 jQuery。当应用程序在移动浏览器中加载时，会调用引导程序 modal() 函数，该函数会显示一条简单的“主屏幕上的书签”消息。

对于 ios，我可以通过以下 sn-p 检查是否正在从主屏幕书签初始化网络应用程序：

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

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

我正在努力寻找一种简单的方法来为 android 实现相同的过程，有没有人做过类似的事情？目前的问题是即使添加了书签，弹出窗口也会继续显示..

【参考方案1】：

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

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

有关 Google Developers 官方文档的更多信息： https://developers.google.com/web/updates/2015/10/display-mode

【讨论】：

window.matchMedia('(display-mode: fullscreen)').matches 如果您使用全屏模式

【参考方案2】：

不幸的是，目前您似乎无法做到。如果您查看安装到主屏幕 (https://developer.chrome.com/multidevice/android/installtohomescreen) 的 Chrome 开发人员页面，则会出现一个常见问题解答，其中指出这是不可能的。

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

You can’t, directly.

编辑：实际上，如果为应用创建 manifest.json，可以指定start_url 参数，参见https://developer.chrome.com/multidevice/android/installtohomescreen#supporting

感觉有点老套，但你能在那个 URL 上附加一个查询字符串吗？ ?fromhomescreen=yes ?这样你就可以根据它来决定是否显示弹出窗口。