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

【问题标题】：What is wrong with this Lighthouse audit? Can I install a PWA from http://localhost这次 Lighthouse 审计有什么问题？我可以从 http://localhost 安装 PWA
【发布时间】：2021-09-20 09:06:38
【问题描述】：

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

我正在使用 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 存储库！只需将其粘贴在面向 Internet 的文件夹/目录中，然后转到“https://your.domain/TravelManager.html”，您需要一个 Google Maps 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 缓存“神奇地”开始工作之前清除了它。巧合？我认为不是。

【问题讨论】：

标签： javascript mobile progressive-web-apps lighthouse

【解决方案1】：

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

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

this 也可能与您有关。

【讨论】：

嗨 Fawaz，澄清一下，当您从 http://locallhost/ 提供应用程序时，您的 App/PWA 提示您安装而不是旧的“添加到主屏幕” askgod/ 而不是 httpS:localhost/askgod/ ？请您提供屏幕截图以添加到您的回复中吗？
@McMurphy 是的，提示安装，截图如下：raw.githubusercontent.com/fawazahmed0/tiger/master/…raw.githubusercontent.com/fawazahmed0/tiger/master/…
感谢法瓦兹！对于 50 分及以上，您能否请（首先编辑您的原始答案，以便我可以提高您的投票，然后）对您的 http:// 版本（不是 https://）运行灯塔审核？它看起来像铬。你能确认它是Chrome吗？我刚刚看到我的适用于 Edge 但不适用于 Chrome 或 Opera - Strange。哦，你没有设置“绕过用户参与检查”标志吗？
是的，我使用的是 chrome 91，这是我的灯塔审核：github.com/fawazahmed0/tiger/releases/download/v2/…我没有设置任何“绕过检查”。
好的@Fawaz，我很抱歉怀疑你。突然之间（老实说，最后一次更改只是将 Firefox 的 HTML 和 BODY 高度设置为 100%，因此 max-min height 将同意 moz-available），现在我被提示了。奇怪的！。再次感谢

【解决方案2】：

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

【讨论】：

Localhost 是该规则的例外，适用于所有其他 ServiceWorker 等。您是否有参考说 httpS 规则仅在安装事件中对 localhost 强制执行？