Why is my 'add to home screen' Web App Install Banner not showing up in my web app Why is my 'add to home screen' Web App Install Banner not showing up in my web app google-chrome google-chrome

Why is my 'add to home screen' Web App Install Banner not showing up in my web app


First, let's check if your manifest fulfills the requirements for showing Web App Install Banners.

Requirements

Full (current) requirements for showing Web App Install Banners are*:

  • Have a web app manifest file with:
    • a short_name
    • a name (used in thebanner prompt)
    • a 144x144 png icon
    • a start_url that loads
  • Is served over HTTPS (a requirement for using service worker).
  • Is visited at least twice, with at least five minutes between visits.

Reference

Okay, so for now let's assume this is all valid. Let's move on to testing.

Testing

To test if you've installed it correctly, you can try the following steps:

  1. Open Chrome DevTools,
  2. Go to the Application panel
  3. Go to the Manifest tab
  4. Click Add to homescreen.

A prompt should now show on top of your browser asking if you want to add the url to your things (on Chrome desktop).

Troubleshooting

If after testing you are getting the following error in your console:

No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

Then please make sure that 1. Your service worker is functioning properly and without errors, and 2. Your start_url matches an actual url of your website that loads. Else, you will never get the prompt to show!

Additionally,

Do note that users (and you!) can also add to the home screen manually through the the (Android) Chrome menu. It is not required to wait for the prompt! I add a lot of websites I tend to use daily to my homescreen, and I hardly ever see a banner!

* Do note that these requirements could change from time to time (they have before!). An update to 'Add to home screen' coming in 2017 has already been announced here

** Also note that these requirements differ significantly from native app install prompts.**


your manifest.json seems good enough. and the above mentioned points by @Extricate are correct and perfect.

So the next question is have you implemented service-worker for your app?
I read somewhere that an empty service-worker file would work but when I tried an empty implementation of service-worker, it said that

 'Site cannot be installed: the page does not work offline' 

So I suppose that latest chrome version would not be supporting the A2HS prompt for APP INSTALL BANNERS if you service-worker dont support offline working.

You can try going to Basic web app prompt , go to devtools in chrome, navigate to Application tab. There you will find manifest.json. On LHS of the manifest file, you can see the ADD TO HOME SCREEN. When you click, it will print

 'Site cannot be installed: the page does not work offline' 

PFA screenshot for same


In your service worker js file add this one line of code:

self.addEventListener('fetch', function(event) {});