Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Add to homescreen" link missing in Chrome DevTools

Working with Google services can be frustrating. They've got incredible documentation, but the documentation always assumes everything works.

If anything doesn't work as advertised, you're completely on your own. No error messages, no help in trouble shooting, not even an acknowledgement that something might not work.

Point in case: Add to homescreen

I've got everything set up: https, service worker, etc., but it's not working.

Tutorials like this 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"?

like image 562
lyle Avatar asked Dec 03 '22 18:12

lyle


2 Answers

I just spent a couple of hours looking for answers to the same question. For whatever reason I don't see it either. But I noticed that for installable PWA apps in Chrome, there is a "+" icon on the right side of the address bar, next to the Favorites "star" icon.

Address Bar Install Icon

like image 24
planavsky82 Avatar answered Dec 28 '22 08:12

planavsky82


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):

enter image description here

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.).

like image 192
Francesco Avatar answered Dec 28 '22 10:12

Francesco