android - Android 版 Chrome - 将网络应用程序添加到主屏幕

Question

我正在尝试使用 Google Chrome 的 native 横幅支持实现“添加到主屏幕”横幅，并引用此演示。

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

根据那里的规范，要求是:

• 页面使用 service worker(是的，见下文)
• 该网站使用的是 HTTPS(是的，该网站具有有效的 SSL 证书，我正在通过 HTTPS 加载。chrome 显示该网站是安全的并且有一个绿色的挂锁，证书中没有错误或警告)
• 应用程序声明了一个 list (是的，见下文)
• list 有一个短名称、144 像素图标和一种“图像/png”类型(是的，见下文)

我正在使用的 list 如下。

{
  "name": "Web app test",
  "short_name": "Test",
  "icons": [
    {
      "src": "/resources/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

其中包含一个短名称和一个 144 像素的 image/png 类型的图标。

我使用的 service worker 是这段代码的直接复制和粘贴:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

本文推荐的:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

Service Worker 已注册，正在将 list 加载到页面中并且图像 URL 正确，但横幅未显示。

我还启用了 chrome://flags/#bypass-app-banner-engagement-checks，所以这不是我需要明天回来检查它是否有效的情况。我已经能够在我检查过的所有 Chrome 演示中查看主屏幕横幅(这是我从中获取大部分代码的地方)并且我的手机安装了最新版本的 Chrome。

还有什么我遗漏的可能会阻止主屏幕横幅出现吗？

谢谢。

Answer 1

需要检查的几件事:

• 确保您有 start_url在定义要启动的页面的 list 中。
• 确保您有 <link rel=manifest>在你的页面中
• 确保图片 URL 根据 list 位置正确解析
• 最好有一个 192px 的图标，最小为 144

Mounir Lamouri 创造了一个 manifest validator您可以用来检查您的 list 是否正确。

如果您使用的是 Chrome，您还应该启用 chrome://flags/#bypass-app-banner-engagement-checks，以便更快地收到警告或发现任何问题。最后，您可以在任何页面加载时查看 Dev Tools 控制台，并会显示一条错误消息，指示未显示横幅的原因。

developers.google.com 上也有很多指导

• Using App Install Banners
  • 创建一个包含简称、图标和 launch_url 的 list 文件
  • 从页面链接到 list 文件
• Web App Install Banner
  • 可选择包含额外信息，例如 background_color和 theme_color .
• Listening to events on App Install banner
  • 了解 Chrome 何时认为它可以提示安装，然后提供将它推迟到更合适的时间的功能。
  • 通过查看 onbeforeinstallprompt 中的响应了解用户是接受还是拒绝了提示事件。