'Progressive web app not showing install button in browser bar

I'm attempting to make a PWA and nothing seems to make the install as web app button appear on my site.

The install button looks like the following and it shows in the address bar:

enter image description here

It shows up when I go to a discourse site but not my own.

I have the following in the head:

My manifest is in the root directory and is named manifest.webmanifest: 

{
  "name": "Example 1",
  "short_name": "example1",
  "display": "standalone",
  "start_url": ".",
  "background_color": "#000000",
  "theme_color":"#ffffff",
  "description": "Example web app.",
  "icons": [{
    "src": "https://www.example.com/test/images/icon_512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "share_target": {
    "action":"/new-topic",
    "method":"GET",
    "enctype":"application/x-www-form-urlencoded",
    "params": {
      "title":"title",
      "text":"body"}
  }
}

There are no errors in the console now. At first there was an error saying it couldn't find the logo image. Once that path was correct the error went away but still no install button.

An example of a PWA is discourse.org forums here. This site installs fine.

Tested in Brave / Firefox / OS X

MDN Progressive Web

Update (found):
Net Ninja Course on PWAs

htmlprogressive-web-apps


Solution 1:[1]

You can find the criteria for a PWA app on MDN docs at https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready. Add to home screen (A2HS) is often used to explain PWAs. The criteria is pretty consistent across most browsers.

Issues why it might not be recognised as a PWA:

  1. It must be served over https (http:// or file:// will not work).
  2. It must have a manifest file with the correct fields filled in.
  3. It must have an appropriate icon to display on the home screen.
  4. For Google Chrome, it must have a service worker registered to allow the app to work offline.

Solution 2:[2]

I use Chrome Inspector to debug my web app manifest: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

For example, it shows the problems in my manifest.json: enter image description here

After fixing the problems, the PWA install icon appears on the Chrome address bar :)

Solution 3:[3]

just make sure your hosting server has an SSL because PWA only work on http://

find better documentation on PWA on this link, https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.

Solution 4:[4]

For my PWA practice app, Chrome WAS showing the install icon. But once I installed it, even after it was uninstalled I never saw another Install icon. Even after rebooting chrome, reinstalling the serviceworker, etc... i don't know if my PWA has a bug, or if Chrome has a bug.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Meng-Yuan Huang
Solution 3
Solution 4 Renee Wendy

Related Questions