Chrome Devtools中的“App banner support”

Question

＆＃34; App横幅广告支持＆＃34;在Chrome Canary 55中安装渐进式网络应用程序的设置？

根据this guide，我想测试网络应用安装横幅是否在我的网站上正常运行。
文章显示可以使用Chrome devtools移动面板进行测试...

以下是他的指示：

  

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

     

  
• 将Chrome更新到最新版本
  
• 启用“Devtools实验”的标记   chrome flags enable-devtools-experiments并重启Chrome
  
• 在Devtools中启用“App banner support”选项 - ＆gt;设置 - ＆gt;实验（如果你没有看到它，按Shift键六次以获得所有实验）
  
• 启用“添加到书架”的标记   铬：//标志/＃启用-添加到产品
  

所以，我启用了标志，打开了devtools，按下shift x6，我在这里看不到任何关于＆＃34; App banner support＆＃34;。

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文件：      
    
  • a short_name（在主屏幕上使用）
    
  • a name（横幅中使用）
    
  • 一个144x144 png图标（图标声明必须包含mime类型的图像/ png）
    
  • 加载<{li>的start_url   
  
• 您的网站上已注册service worker。
  
• 服务于HTTPS（使用服务工作者的要求）。
  
• 至少访问过两次，访问时间至少为五分钟。
  

     

测试应用安装横幅

     

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

     

然后，只要您有一个清单（正确配置），在HTTPS（或localhost）上并且有一个服务工作者，您应该看到安装提示。