“添加到主屏幕"Chrome DevTools中缺少链接 [英] "Add to homescreen" link missing in Chrome DevTools

问题描述

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

如果没有任何广告宣传的内容，那么您完全是一个人.没有错误消息，没有解决问题的帮助，甚至没有承认某些东西可能无法正常工作.

以防万一:添加到主屏幕

我已经设置了所有内容:https，服务工作者等，但无法正常工作.

这样的教程

如果您想了解有关PWA的更多信息，请https://developers.google.com/web/ilt/pwa/tools-for-pwa-developers show that in Chrome DevTools -> Application -> Manifest there's an "Add to homescreen" link to try the workflow, but that link simply is not there.

I couldn't find any tutorial that describes what to do if that link is missing.

The only hint was to use Lighthouse to audit the page. Lighthouse shows the app as "Installable". It "Uses HTTPS", it "Registers a service worker that controls page and start_url" and the "Web app manifest meets the installability requirements". All green.

What could cause the "Add to homescreen" link to be missing even though Lighthouse describes the page as "Installable"?

解决方案

The Google documentation screenshots are obsolete, Chrome does not have anymore the "Add to Home Screen" link in the Manifest tab of Dev Tools.

The current way to install manually a PWA is using the "+" icon in the address bar (available if the web site meets the add to home screen criteria) or using Chrome menu (three dots on the right) and selecting "Install AppName", where AppName is the web site name.

Below a screenshot with these two options (for DEV Community portal):

If you are interested in learning more about PWAs, I wrote a series of articles about them, starting from theory to concrete use cases (caching strategies with service workers, etc.).

这篇关于“添加到主屏幕"Chrome DevTools中缺少链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！