Chrome Devtools 中的“应用横幅支持”

Question

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

根据this guide，我想测试网络应用安装横幅是否在我的网站上正常工作。
这篇文章展示了使用 Chrome devtools 移动面板进行测试的可能性......

这是他的指示：

如果您没有看到“请求应用横幅...”条目，请尝试以下操作：

• 将 Chrome 更新到最新版本
• 为“Devtools Experiments”启用标志 chrome 标记 enable-devtools-experiments 并重启 Chrome
• 在 Devtools -> Settings -> Experiments 中启用“App Banner support”选项（如果看不到，请在此处按 Shift 六次以获取所有实验）
• 启用“添加到书架”标志 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 会自动显示横幅：

• 有一个web app manifest 文件：
  • short_name（用于主屏幕）
  • name（用于横幅）
  • 144x144 png 图标（图标声明必须包含 mime 类型的 image/png）
  • 加载的start_url
• 在您的网站上注册了service worker。
• 通过 HTTPS 提供服务（使用 Service Worker 的要求）。
• 至少访问过两次，两次访问之间至少间隔五分钟。

测试应用安装横幅

仅当用户在五分钟内访问该页面至少两次后才会显示应用安装横幅。您可以通过启用 Chrome 标志 #bypass-app-banner-engagement-checks 来禁用访问频率检查。要在桌面 Chrome 上进行测试，您需要启用 Chrome 标志 #enable-add-to-shelf。

然后，只要你有一个清单（配置正确），在 HTTPS（或 localhost）上并且有一个 service worker，你应该会看到安装提示。