Progressive web app not showing install button in browser bar

Issue

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:

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

I have the following in the head:

  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

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

Solution

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.

Answered By - Jackson