@ angular/service-worker离线时无法正常工作

Question

我从来没有让Angular Mobile Team的服务工作者正常工作,此时我想我忘了启用某些东西,因为它从最初发布以来就没有用过.即使它在我离线时在谷歌浏览器(智能手机和桌面)上安装并运行它也不再起作用,它也会在更新后随机崩溃.

没有关于如何设置它的文档.所以这就是我做的方式:

• ng new test-service-worker
• npm install @angular/service-worker
• 在.angular-cli.json,我补充说"serviceWorker": true
• npm build --prod,输出ngsw-manifest.json sw-register.b73048fe3d9f8a1e7ae5.bundle.j和worker-basic.min.js.所以一切似乎都好
• https://test-service-worker-97321.firebaseapp.com/ SW安装
• 如果我离线,等待一个小时让缓存过期(或者只是禁用缓存),我得到一个failed to load错误,无论我使用的是什么设备.

---

生成的dist目录:

---

生成的ngsw-manifest.json:

---

已安装并运行的服务工作者:可用的测试https://test-service-worker-97321.firebaseapp.com/

---

当我将chrome devtools选项设置为Offline并且Disable cache服务工作者不再加载内容时.它是如何工作的一个很好的例子是Twitter的,当他们的Web应用程序的工作原理Offline,并Disable cache进行检查.

注意:我之前与服务工作者创建了一些应用程序,并且他们在Chrome上正常工作.我不知道我在这里做错了什么.

Answer 1

您必须在离线模式下测试您的应用,并明确提及index.html.我检查了https://test-service-worker-97321.firebaseapp.com/index.html - 它工作正常.

如果您希望您的应用程序在没有提及索引文档的情况下脱机工作(以及所有其他路由),则必须设置路由重定向

查看示例.此自定义ngsw-manifest.json将在构建期间与自动生成的自定义合并.