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

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 网络忍者课程

原文由 1.21 gigawatts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 MDN 文档上找到 PWA 应用程序的标准，网址为 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready 。添加到主屏幕 (A2HS) 通常用于解释 PWA。大多数浏览器的标准都非常一致。

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

1. 它必须服务于 https （ http:// 或 file:// 将不起作用）。
2. 它必须有一个清单文件，其中填写了正确的字段。
3. 它必须有一个合适的图标才能显示在主屏幕上。
4. 对于谷歌浏览器，它必须注册一个 service worker 才能允许应用程序离线工作。

原文由 Jackson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Meng-Yuan Huang 发布，翻译遵循 CC BY-SA 4.0 许可协议