Progressive web app not showing install button in browser bar

Question

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:

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

Answer 1

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:

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