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

Question

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

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

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

我有以下内容：

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

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

PWA 的一个例子是这里的discourse.org 论坛。该站点安装正常。

在 Brave / Firefox / OS X 中测试

MDN 渐进式网页

更新（找到）：
PWA 上的 Net Ninja 课程

Answer 1

我使用 Chrome Inspector 调试我的网络应用程序清单：https : //developers.google.com/web/tools/chrome-devtools/progressive-web-apps

例如，它显示了我的 manifest.json 中的问题：

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

Answer 2

您可以在https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWA上找到 Firefox 上 PWA 应用程序的标准。添加到主屏幕是解释 PWA 的另一种方式。大多数浏览器的标准非常一致。

为什么它可能不被识别为 PWA 的问题：

1. 它必须通过 https 提供（http:// 或 file:// 将不起作用）。
2. 对于谷歌浏览器，它必须注册一个 service worker 才能允许应用离线工作。