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

Question

我你去应用https://quotesaboutjesus.netlify.com/quotes并查看 Chrome 开发工具中的“应用程序”选项卡，几秒钟后您会看到服务工作线程运行良好...并且该应用程序在在线模式下运行良好。

但是 Lighthouse 审计结果总是说我:

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

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

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

所以我不明白为什么我没有通过审计测试(你可以很容易地自己重现 online )。

我想这可能是因为我的软件注册晚了一点，所以我尝试优化应用程序的性能，但即使现在它也有更好的性能分数(至少在审计测试期间为 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

你应该在 app.module 中添加 registrationStrategy: "registerImmediately" 到 serviceWorker 注册:

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

如中所述