Progressive web app not showing install button in browser bar-CodePudding

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

CodePudding user response：

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

CodePudding user response：

You can find the criteria for a PWA app on Firefox at https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWA. Add to home screen is another way to explain PWAs. The criteria is pretty consistent across most browsers.

Issues why it might not be recognised as a PWA:

It must be served over https (http:// or file:// will not work).
For Google Chrome, it must have a service worker registered to allow the app to work offline.

CodePudding user response：

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.