为什么我的 Angular PWA 在 Lighthouse PWA 审核中失败，而当我手动测试它时一切正常？

Question

如果你转到应用程序https://quotesaboutjesus.netlify.com/quotes 并查看 Chrome 开发工具中的应用程序选项卡，几秒钟后你会看到 service worker 运行良好......并且应用程序在在线模式下运行良好。

但灯塔审计结果总是说我：

• 当前页面在离线时没有响应 200。
• start_url 在离线时没有响应 200。start_url 确实响应了，但不是通过 service worker。
• 不注册控制 page 和 start_url 的 service worker

但是正如您在我的code here 或直接在my manifest.webmanifest here 中看到的那样，我做到了（我想？：因为 Lighthouse 说我没有）：

1. 添加网络应用清单。
2. 检查清单中的 start_url 是否正确。
3. 向您的应用添加服务人员。
4. 使用 service worker 在本地缓存文件。
5. 离线时，使用service worker作为网络代理返回 文件的本地缓存版本。

所以我不明白为什么我没有通过审计测试（你可以自己轻松地重现它online）。

我想这可能是因为我的 SW 注册有点晚，所以我尝试优化应用程序的性能，但即使现在它的性能得分也更好（至少在审计测试期间是 90），它是没有通过这个测试。

有人可以帮我吗？

Image showing the Lighthouse error messages

Image showing the service worker working well

Image Showing the (start_ul in) manifest

Answer 1

我也遇到了这个问题，然后我在以下位置找到了这个解决方案： https://stackoverflow.com/a/61152966/8581106

您应该将registrationStrategy: "registerImmediately" 添加到 app.module 中的 serviceWorker 注册中：

ServiceWorkerModule.register("ngsw-worker.js", {
            enabled: environment.enableProdMode,
            registrationStrategy: "registerImmediately"
}),

如中所述