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

【问题标题】：Progressive web app not showing install button in browser bar渐进式 Web 应用程序未在浏览器栏中显示安装按钮
【发布时间】：2020-03-17 23:40:33
【问题描述】：

我正在尝试创建PWA，但似乎没有任何东西可以让我的网站上出现安装为网络应用程序按钮。

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

当我访问一个讨论网站而不是我自己的网站时，它会出现。

我脑子里有以下内容：

我的清单在根目录中，名为 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 论坛here。这个网站安装得很好。

在 Brave / Firefox / OS X 中测试

MDN Progressive Web

更新（找到）：
Net Ninja Course on PWAs

【问题讨论】：

Firefox 上 PWA 应用的标准是developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/…，这对于大多数浏览器来说几乎相同。它是否通过 https 提供服务并且是否已注册服务人员？
@Jackson 我还没有创建服务工作者。我会补充一下，看看会发生什么。在 localhost 或 file:// 上进行本地测试怎么样？我也会确保在 https 上进行测试。
安装测试必须在 HTTPS 主机上进行。一旦你得到它，使用 Chrome Lighthouse 工具检查并确保它是一个有效的可安装 PWA。如果有任何问题，Lighthouse 会提示您如何解决。
@Jackson 想要添加作为答案？还发现了这个，developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/…，但它看起来像添加到主屏幕，而不是 PWA。
引用，Note: The .webmanifest extension is specified in the Media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .json. 恕我直言，因为它似乎是可选的，我更喜欢使用 .json 扩展名，以便相关编辑可以轻松打开它，如果没有任何问题。

标签： html progressive-web-apps

【解决方案1】：

只需确保您的托管服务器具有 SSL，因为 PWA 仅适用于 http://

在此链接https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps 上找到有关 PWA 的更好文档。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这救了我，经过长时间的搜索。应用清单显示范围不正确

【解决方案3】：

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

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

它必须通过 https 提供（http:// 或 file:// 不起作用）。
对于 Google Chrome，它必须注册一个 service worker 才能让应用离线工作。

【讨论】：