html - 渐进式 Web 应用程序未在浏览器栏中显示安装按钮

Question

我正在尝试制作 PWA并且似乎没有任何东西可以使安装为 Web 应用程序按钮出现在我的网站上。

安装按钮如下所示，并显示在地址栏中:



当我去一个话语网站而不是我自己的网站时，它就会出现。

我脑子里有以下内容:

我的 list 位于根目录中，名为 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"}
  }
}

现在控制台中没有错误。起初有一个错误说它找不到 Logo 图像。一旦该路径正确，错误就消失了，但仍然没有安装按钮。

PWA 的一个例子是 discourse.org 论坛 here .这个网站安装得很好。

在 Brave/Firefox/OS X 中测试

MDN Progressive Web

更新(找到):
Net Ninja Course on PWAs

Answer 1

我使用 Chrome Inspector 来调试我的网络应用 list :
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
例如，它显示了我的 manifest.json 中的问题:

修复问题后，Chrome 地址栏上会出现 PWA 安装图标 :)