google-chrome - Chrome DevTools 中缺少 "Add to homescreen"链接

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 的服务 worker ”，并且“Web 应用程序 list 满足可安装性要求”。都是绿色的。

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

Answer 1

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

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

下面是带有这两个选项的屏幕截图(对于 DEV Community portal ):



如果您有兴趣了解有关 PWA 的更多信息，I wrote a series of articles about them ，从理论到具体用例(服务 worker 的缓存策略等)。