PWA debug chrome "add to homescreen" button not doing anything

Question

I am trying to add the "add to Homescreen" prompt function to my website. Now I've read the google developer articles and I have everything set up.

Now, If I try to manually add my page to the homescreen with the button "Add to homecreen" in the Chrome devtools > Application > Manifest , nothing is happening. A few times the console showed an error, but after fixing it nothing happens. I don't get the Add to shelf banner, but I don't get an error displayed in the console. Lighthouse doesn't show any error either. In fact, lighthouse shows a score of 92 in pwa.

Is this now meaning that everything is working? Is there an other debug function I've overseen?

Edit: If I press the button and than reload the page, after I press reload and the page is acctually loaded, the console displays:

Site cannot be installed: the page has requested the banner prompt be cancelled

Answer 1

If you are testing in localhost, try http://localhost instead of 127.0.0.1.

I don't know why, but I have the same issue when using 127.0.0.1. After changing to localhost, it works correctly.

Answer 2

I was having this same issue: Chrome Dev Tools Add to Homescreen was not working on ANY PWA. After days struggling trying to figure out where the problem was I finally found that Chrome main menu has an option to install the app, and that option is working fine. So you don't need to use Chrome Dev Tools option.