这次 Lighthouse 审计有什么问题？我可以从 http://localhost 安装 PWA 吗？

Question

我有一个 PWA 在 Chrome 上通过了可安装 PWA 的 Lighthouse 审核，但我从未收到安装它的提示，并且“beforeinstallprompt”事件从未触发。刚刚检查了 Opera，它不要求我安装 :-(

我是developing/debugging，http://localhost，似乎适合其他测试，会不会是这个问题？我想在部署之前在本地测试我的定制安装提示。

清单：-

{
  "short_name": "Brotkrumen",
  "name": "Brotkrumen Web App",
  "description": "Native Background Geolocation POC",
  "icons": [
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/travelmanager.html",
  "background_color": "#00ccdd",
  "theme_color": "#00ccdd",
  "display": "fullscreen"
}

灯塔审核：-

编辑 1

请注意：- 任何人都可以克隆 https://github.com/RichardMaher/Brotkrumen 存储库！只需将它放在面向互联网的 folder/directory 中，然后转到“https://your.domain/TravelManager.html”，您将需要一个 Google 地图 API键使用地图和至少几个 GPS 读数，然后才能按“到达”。

注意：使用 Edge 时，我会通过 beforeinstall 事件 https://github.com/RichardMaher/Brotkrumen/blob/master/TravelManager.html Line# 117 收到安装提示，但不会 Chrome

@Fawaz 你确定你没有添加 chrome://flags/#bypass-app-banner-engagement-checks 吗？只是我已经多次调用您的网站，但它没有要求我安装。您是否在另一台 PC 上尝试过 Chrome？

编辑 2

学生错误 :-( 很确定我在 BrotkrumenV1 缓存“神奇地”开始工作之前清除了它。巧合？我认为不是。

Answer 1

要使网站可安装，必须从安全 (HTTPS) 域提供服务。您可以使用 mkcert 在 HTTPS 上运行本地主机。欲了解更多信息： https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs

Answer 2

我确实在 http://localhost 上看到添加到主屏幕（我在桌面 chrome 浏览器上测试过，它显示了安装应用程序选项）

这是我的应用程序的 build code。

另外 this 可能与您相关。

这次 Lighthouse 审计有什么问题？我可以从 http://localhost 安装 PWA 吗？

What is wrong with this Lighthouse audit? Can I install a PWA from http://localhost

javascript

mobile

progressive-web-apps

lighthouse