如何从主屏幕中删除图标后,为渐进式网络应用程序带回"添加到主页"横幅？

Question

原因 - 我做了一个Progressive web app,在浏览器中打开 - 一切都很好,浏览器让我把它添加到主屏幕.

现在,我想在演示文稿中演示这一点,所以 - 从主屏幕中删除了图标.但是在最后一整天,我一直在使用镀铬网站,并且横幅永远不会出现.

它真的是千载难逢的事吗？或者我需要做些什么？

Answer 1

应用程序安装横幅提示通常在您访问网站至少两次后,每次访问之间至少5分钟时显示.使用Chrome标记,您可以绕过这些检查,以便每次访问时都会显示横幅:

1. 打开Android Chrome.
2. 去 chrome://flags/#bypass-app-banner-engagement-checks
3. 单击启用
4. 单击立即重启

您还可以从Chrome DevTools 模拟添加到主屏幕事件:

1. 在手机上打开Android Chrome,然后导航到PWA(例如,来自https://paperplanes.world的Paper Planes应用程序).
2. 使用USB线连接到Android.
3. 在桌面Chrome DevTools中,选择菜单 > 更多工具 >远程设备.或 CTRLSHIFTP(或CMDSHIFTP对于macOS),然后输入"远程设备".
4. 按名称选择您的手机.
5. 单击与PWA对应的列表项旁边的" 检查"按钮(例如," 纸平面").
6. 在PWA的新DevTools弹出窗口中,转到" 应用程序"面板,然后单击" 添加到主屏幕".这会导致应用安装横幅显示在Android Chrome中.请注意,横幅广告不会出现在Chrome DevTools屏幕镜像中.

(以上步骤通过macOS Sierra和Android Chrome 57上的Chrome 55验证)

Answer 2

我找到了另一种解决方案 - 当我进入chrome mobile的设置并选择History- > Clear browsing data并单击Cookies按钮 - 之后我再次Clear Data将应用程序添加到主屏幕.

显然 - 它不仅清除了数据,还使浏览器app install banner关于这个网站的一切.

(奇怪的是 - 旧图标不会消失......所以现在我在主屏幕上有几个图标:D ...)