CODEWITHSUNDEEP
htmlgoogle-chromeprogressive-web-apps
Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13837

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

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?

Upvotes: 21

Views: 34186

Answers (4)

imsinu9
imsinu9

Reputation: 769

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

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

Upvotes: 5

Extricate
Extricate

Reputation: 811

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

Upvotes: 33

the_man
the_man

Reputation: 79

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

Upvotes: 4

Parth Mistry
Parth Mistry

Reputation: 140

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

Upvotes: 5

Related Questions