google-chrome - Chrome 开发者工具中的 “App banner support”

Question

Chrome Canary 55 中渐进式网络应用安装的“应用横幅支持”设置在哪里？

每this guide ，我想测试网络应用安装横幅在我的网站上是否正常工作。
本文展示了使用 Chrome 开发工具移动面板进行测试的可能性...

以下是他的说明:

If you don’t see the “Request app banner…” entry, try the following:

• Update Chrome to the latest version
• Enable the flag for “Devtools Experiments” chrome flags enable-devtools-experiments and restart Chrome
• Enable the option “App banner support” in Devtools -> Settings -> Experiments (If you don’t see it, press Shift six times there to get all experiments)
• Enable the flag for “Add to shelf” chrome://flags/#enable-add-to-shelf

因此，我启用了标志，打开开发工具，按 Shift x6，但我在这里没有看到任何有关“应用横幅支持”的内容。

Answer 1

您提到的教程相对过时，该功能已被移动并从 DevTools 实验中毕业。

Chrome 53/55 DevTools 有一个应用程序 选项卡，其中包含添加到主屏幕 链接，如果您的应用符合下面概述的条件(错误记录到控制台):

Chrome 53/55、macOS Sierra 上的安装横幅屏幕截图:

Chrome 54、Android 6.0.1 上的安装横幅屏幕截图:

More recent (updated 6-Oct-2016) documentation on Web App Install Banners状态:

Chrome automatically displays the banner when your app meets the following criteria:

• Has a web app manifest file with:
  • a short_name (used on the home screen)
  • a name (used in the banner)
  • a 144x144 png icon (the icon declarations must include a mime type of image/png)
  • a start_url that loads
• Has a service worker registered on your site.
• Is served over HTTPS (a requirement for using service worker).
• Is visited at least twice, with at least five minutes between visits.

Testing the app install banner

The app install banner is only shown after the user visits the page at least twice within five minutes. You can disable the visit-frequency check by enabling the Chrome flag #bypass-app-banner-engagement-checks. To test on desktop Chrome, you need to enable the Chrome flag #enable-add-to-shelf.

Then, as long as you have a manifest (configured correctly), are on HTTPS (or localhost) and have a service worker, you should see the install prompt.