7

我正在尝试使用 Google Chrome 的原生横幅支持实现“添加到主屏幕”横幅，并以此演示作为参考。

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

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

  • 该页面使用服务工作者（是的，见下文）
  • 该站点正在使用 HTTPS（是的，该站点具有有效的 SSL 证书，我正在通过 HTTPS 加载。chrome 显示该站点是安全的并且有一个绿色挂锁，证书中没有错误或警告）
  • 该应用程序声明了一个清单（是的，见下文）
  • 清单有一个短名称、144 像素图标和一种“图像/PNG”（是的，见下文）

我正在使用的清单如下。

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

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

我正在使用的服务人员是此代码的直接复制和粘贴：

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

服务工作者已注册，清单正在加载到页面中，并且图像 url 正确，但未显示横幅。

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

我还缺少什么可能会阻止主屏幕横幅出现吗？

谢谢。

4

2 回答 2

8

有几件事要检查：

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

Mounir Lamouri 创建了一个清单验证器，您可以使用它来检查清单是否正确。

如果您使用的是 Chrome，您还应该启用 chrome://flags/#bypass-app-banner-engagement-checks，以便更快地获得警告或任何问题的可见性。最后，您可以在任何页面加载时查看 Dev Tools 控制台，并且将显示一个错误，指示为什么未显示横幅。

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

  • 使用应用安装横幅
    • 创建一个包含 short_name、icons 和 launch_url 的清单文件
    • 从页面链接到清单文件
  • Web 应用安装横幅
    • （可选）包括额外信息，例如background_color和theme_color。
  • 收听应用安装横幅上的事件
    • 了解 Chrome 何时认为它可以提示安装，然后提供将其推迟到更合适的时间的能力。
    • 通过查看onbeforeinstallprompt事件中的响应来了解用户是接受还是拒绝了提示。
于 2015-12-01T10:27:45.893 回答
1

一般来说，我建议将您的清单粘贴到其中以确保它没有任何错误： http: //mounirlamouri.github.io/manifest-validator/

如果在启用了 chrome://flags/#bypass-app-banner-engagement-checks 的情况下使用 Chrome，您可以在任何页面加载时在控制台中查看，并且将显示一个错误，指示未显示横幅的原因。

于 2015-12-01T17:01:53.307 回答