Chrome DevTools 中缺少“添加到主屏幕”链接

Question

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

如果有任何事情不像宣传的那样有效，那么您就完全靠自己了。没有错误消息，没有帮助排除故障，甚至没有确认某些事情可能不起作用。

以防万一：添加到主屏幕

我已经设置好了一切：https、service worker 等，但它不起作用。

像这样的教程https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers显示在 Chrome DevTools -> Application -> Manifest 中有一个“添加到主屏幕”链接来尝试工作流程，但该链接根本不存在。

我找不到任何说明缺少该链接时该怎么做的教程。

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

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

Answer 1

Google 文档截图已过时，Chrome 在开发工具的清单选项卡中不再有“添加到主屏幕”链接。

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

下面是带有这两个选项的屏幕截图（用于DEV 社区门户）：

如果你有兴趣进一步了解 PWA，我写了一系列关于它们的文章，从理论到具体用例（Service Workers 的缓存策略等）。