html - 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 is not working as intended.

Here is my manifest.json file

{
  "name": "MySite",
  "short_name": "Mysite",
  "start_url": "./?utm_source=homescreen",
  "icons": [{
      "src": "assets/cacheable/images/shortcut/120x120.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/142x142.png",
      "sizes": "142x142",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "384x384",
      "type": "image/png"
    }],
  "orientation": "portrait" ,
  "background_color": "#fff",
  "display": "standalone",
  "theme_color": "#fff"
}

Please let me know if I forgot to add anything?

Answer 1

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