如何测试手机 chrome 的 "save to homescreen" 提示

How to test mobile chrome's "save to homescreen" prompt

我正在复活我的 an old project 作为学习新东西的方式。

我正在做 this code lab from IO 将您的 Web 应用程序添加到用户的主屏幕

除了连接 phone 并等待很长时间外,还有什么方法可以测试用户是否会看到下面的提示?

我用 Lighthouse 测试过,所有测试都返回绿色,但我从未看到提示。目前感觉很随意

This question的回答让大家看到了挣扎:

The user has visited your site twice over two separate days during the course of two weeks

这是否意味着我需要在更改之间等待 2 天才能查看它是否有效?

Enable chrome://flags/#bypass-app-banner-engagement-checks and you will see the banner as long as you have a manifest (configured correctly) and are on HTTPS and have a service worker.

通过 Web 应用程序安装横幅提高参与度

anshulix 已经正确回答了问题,但我认为我应该给出更详细的答案。


要删除保存到主屏幕提示的等待和其他要求,则需要启用一个标志。

Enable chrome://flags/#bypass-app-banner-engagement-checks and you will see the banner as long as you have a manifest (configured correctly) and are on HTTPS and have a service worker.

来自Increasing Engagement with Web App Install Banners

请务必记住,您是在 移动浏览器 上设置此标志,而不是在桌面浏览器上设置。出于某种原因,这并没有发生一段时间!

您还需要重启手机 Chrome 才能使标记生效。如果您的选项卡与其他应用混在一起,这可能会很棘手,因为您需要找到所有选项卡并关闭它们。 (或者找到更好的关闭方式Chrome。)

我发现在 Chrome Dev 中进行调试比在常规 chrome 中进行调试要容易得多,因为 a) 我知道它有最新的修复程序,并且 b) 因为我只有 1选项卡打开,因此很容易重新启动浏览器。


如果您正在进行远程检查,an issue 会出现关于控制台中出现的消息。在 Chrome 50 你得到:

App banner not shown: could not determine the best icon to use

这似乎不是真的;在最近的版本中——例如mobile Chrome 52—save to desktop 工作正常。这是一个令人不安但无用的错误。


作为额外的帮助,realfavicongenerator 在生成您需要的所有图标和清单文件方面做得非常出色。