“ Chrome开发者工具”中缺少“添加到主屏幕”链接

Question

使用Google服务可能会令人沮丧。他们有令人难以置信的文档，但是文档始终假定一切正常。

[如果任何东西都不能像广告中所宣传的那样工作，那您就完全靠自己了。没有错误消息，对解决问题没有帮助，甚至没有承认某些东西可能不起作用。

以防万一：添加到主屏幕

我已经设置好所有内容：https，服务人员等，但无法正常工作。

https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers这样的教程表明，在Chrome DevTools-> Application-> Manifest中，有一个” Add to homescreen”链接可以尝试工作流程，但是该链接根本不存在。

我找不到描述该链接丢失时该怎么办的教程。

唯一的提示是使用Lighthouse审核页面。 Lighthouse将应用程序显示为“可安装”。它“使用HTTPS”，“注册控制页面和start_url的服务工作者”以及“ Web应用程序清单满足可安装性要求”。全绿色。

即使Lighthouse将页面描述为“可安装”，也可能导致“添加到主屏幕”链接丢失的原因？

Answer 1

我只花了几个小时来寻找相同问题的答案。无论出于什么原因，我也看不到它。但是我注意到，对于Chrome中可安装的PWA应用程序，地址栏右侧的收藏夹“星号”图标旁边有一个“ +”图标。

Answer 2

Google文档屏幕快照已过时，Chrome在开发人员工具的清单标签中不再具有“添加到主屏幕”链接。

当前安装手动 PWA的方法是使用地址栏中的“ +”图标（如果网站符合添加到主屏幕的条件，则可用）或使用Chrome菜单（右侧的三个点）并选择“安装AppName”，其中AppName是网站名称。

下面是具有这两个选项的屏幕截图（DEV Community portal：]

如果您有兴趣学习更多有关PWA的信息，I wrote a series of articles about them，从理论到具体用例（与服务工作者一起使用的缓存策略等）。