"Add to homescreen" link 缺少 Chrome DevTools
"Add to homescreen" link missing in Chrome DevTools
使用 Google 服务可能会令人沮丧。他们有令人难以置信的文档，但文档总是假设一切正常。
如果有任何事情不像宣传的那样有效，那就完全靠你自己了。没有错误消息，没有解决问题的帮助，甚至没有确认某事可能无法正常工作。
以防万一：添加到主屏幕
我已经设置好一切：https、service worker 等，但它不起作用。
像这样的教程 https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers 表明在 Chrome DevTools -> Application -> Manifest 中有一个 "Add to homescreen" link 来尝试工作流程，但是 link根本不存在。
我找不到任何教程来说明如果 link 缺失该怎么办。
唯一的提示是使用 Lighthouse 来审核页面。 Lighthouse 将应用程序显示为 "Installable"。它 "Uses HTTPS"、它 "Registers a service worker that controls page and start_url" 和 "Web app manifest meets the installability requirements"。全绿。
尽管 Lighthouse 将页面描述为 "Installable"，但什么会导致 "Add to homescreen" link 丢失？
我刚刚花了几个小时寻找同一个问题的答案。无论出于何种原因，我也看不到它。但我注意到对于 Chrome 中的可安装 PWA 应用程序，地址栏右侧有一个“+”图标，紧挨着收藏夹 "star" 图标。
Google 文档截图已过时，Chrome 在开发工具的清单选项卡中不再有 "Add to Home Screen" link。
当前手动安装 PWA 的方式是使用地址栏中的“+”图标（如果网站满足添加到主屏幕的条件则可用）或使用Chrome 菜单（右侧三个点）并选择 "Install AppName"，其中 AppName 是网站名称。
下面是包含这两个选项的屏幕截图（DEV Community portal）：
如果您有兴趣了解有关 PWA 的更多信息，I wrote a series of articles about them，从理论到具体用例（服务工作者的缓存策略等）。
使用 Google 服务可能会令人沮丧。他们有令人难以置信的文档，但文档总是假设一切正常。
如果有任何事情不像宣传的那样有效，那就完全靠你自己了。没有错误消息，没有解决问题的帮助，甚至没有确认某事可能无法正常工作。
以防万一：添加到主屏幕
我已经设置好一切：https、service worker 等，但它不起作用。
像这样的教程 https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers 表明在 Chrome DevTools -> Application -> Manifest 中有一个 "Add to homescreen" link 来尝试工作流程，但是 link根本不存在。
我找不到任何教程来说明如果 link 缺失该怎么办。
唯一的提示是使用 Lighthouse 来审核页面。 Lighthouse 将应用程序显示为 "Installable"。它 "Uses HTTPS"、它 "Registers a service worker that controls page and start_url" 和 "Web app manifest meets the installability requirements"。全绿。
尽管 Lighthouse 将页面描述为 "Installable"，但什么会导致 "Add to homescreen" link 丢失？
我刚刚花了几个小时寻找同一个问题的答案。无论出于何种原因，我也看不到它。但我注意到对于 Chrome 中的可安装 PWA 应用程序，地址栏右侧有一个“+”图标，紧挨着收藏夹 "star" 图标。
Google 文档截图已过时，Chrome 在开发工具的清单选项卡中不再有 "Add to Home Screen" link。
当前手动安装 PWA 的方式是使用地址栏中的“+”图标（如果网站满足添加到主屏幕的条件则可用）或使用Chrome 菜单（右侧三个点）并选择 "Install AppName"，其中 AppName 是网站名称。
下面是包含这两个选项的屏幕截图（DEV Community portal）：
如果您有兴趣了解有关 PWA 的更多信息，I wrote a series of articles about them，从理论到具体用例（服务工作者的缓存策略等）。