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

Question

I\'ve created a service-worker and manifest.json file in order to display an \'add to home screen\' Web App Install Banner for Chrome Browser Users.

It

Answer 1

May be usefull, as had similar issue. The Install infobar appeared once and never again.

From Developers Google

The mini-infobar will appear when the site meets the criteria, and once dismissed by the user, it will not appear again until a sufficient amount of time has passed (currently 3 months).

Answer 2

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

Answer 3

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 the banner 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.**

Answer 4

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

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