Chrome for Android - 将网络应用添加到主屏幕

Question

我正在尝试使用Google Chrome的本机横幅支持实现"添加到主屏幕"横幅,此演示作为参考.

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

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

• 该页面使用服务工作者(是的,见下文)
• 该网站正在使用HTTPS(是的,该网站有一个有效的SSL证书,我通过HTTPS加载.rrome显示该网站是安全的,并有一个绿色的挂锁,证书中没有错误或警告)
• 该应用程序已声明一个清单(是的,见下文)
• 清单有一个short_name,144像素图标和一个'image/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.

还有什么我可能会阻止主页横幅出现吗？

谢谢.

Answer 1

要检查的几件事:

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

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

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

关于developers.google.com还有很多指导

• 使用应用安装横幅
  • 创建包含short_name,icons和launch_url的清单文件
  • 链接到页面中的清单文件
• Web App安装横幅
  • 可选择包含额外信息,例如background_color和theme_color.
• 在App安装横幅上收听活动
  • 了解Chrome何时认为可以提示安装,然后提供将其推迟到更合适时间的功能.
  • 通过查看onbeforeinstallprompt事件中的响应,了解用户是否已接受或拒绝提示.