无法获取 PWA 的“安装”选项

Question

我正在尝试将我的网站制作为 PWA 并将 ServiceWorker 集成到其中。ServiceWorker 已正确注册，因为我能够看到“离线”功能。

但问题是我无法获得用于安装 PWA 的“安装”按钮。

我已按照与 pwa-install 包相关的说明进行操作，但仍然不起作用。

我还为此打开了一个 Github 问题，其中包含更多详细信息和屏幕截图： https:
//github.com/pwa-builder/pwa-install/issues/355

任何帮助将不胜感激。提前致谢。

Answer 1

我建议您使用Chrome开发者工具中的Lighthouse工具。只需导航到 Lighthouse 选项卡，然后选中“Progressive Web App”。这将概述您所缺少的内容的详细信息。

您提到您已经有一个 Service Worker。现在处理您的清单文件，并将流量重定向到 https（而不是 http），作为您的应用程序可安装的最低要求。

在您的网站：https ://www.kcak11.com/ 中，截至撰写本文时 - 2020 年 7 月 14 日晚上 9:33（太平洋标准时间），PWA 配置错误如下：

• Manifest 文件有错误：显示值不是以下之一：minimal-ui | 全屏| 独立的
• 离线时 start_url 不会响应 200。start_url 确实响应了，但不是通过服务工作者
• 未配置自定义启动屏幕。失败：清单没有background_color

Lighthouse 已经提供了一些提示（通过“了解更多”链接）来解决这些问题。解决这些问题，您的 PWA 就可以安装了。

以下是 PWA Lighthouse 报告的最佳结果示例（使用我的 PWA 网站）：