离线时@ angular/service-worker无法正常工作 [英] @angular/service-worker not working when offline

问题描述

我从没让Angular Mobile团队的服务人员正常工作，而在这一点上，我想我忘了启用某些功能了，因为自从最初发行以来，它一直没有起作用.即使我离线时安装并在Google Chrome浏览器(智能手机和台式机)上运行，它也不再起作用，更新后它也会随机崩溃.

I never got the service worker from Angular Mobile Team to work properly and at this point I guess I forgot to enable something, because it never worked since the initial release. Even if it installs and run on Google Chrome (smartphone & desktop) when I go offline it doesn't work anymore, also it randomly crashes after updates.

没有有关如何进行设置的文档.所以这是我的做法:

There is no documentation on how to set it up. So here is how I did it:

• 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 s和worker-basic.min.js.所以一切似乎都很好
• https://test-service-worker-97321.firebaseapp.com/软件安装
• 如果我离线，请等待一个小时，以使缓存过期(或直接禁用缓存)，无论使用什么设备，都会出现failed to load错误.

• ng new test-service-worker
• npm install @angular/service-worker
• in .angular-cli.json, I add "serviceWorker": true
• npm build --prod, output ngsw-manifest.json sw-register.b73048fe3d9f8a1e7ae5.bundle.js and worker-basic.min.js. So everything seems ok
• https://test-service-worker-97321.firebaseapp.com/ the SW installs
• If I go offline, wait an hour for cache to expire (or simply disable cache), I get a failed to load error, no matter the device I use.

生成的dist目录:

The generated dist directory:

生成的ngsw-manifest.json:

The generated ngsw-manifest.json:

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

The service worker installed and running: Test available https://test-service-worker-97321.firebaseapp.com/

当我将chrome devtools选项设置为Offline和Disable cache时，服务工作者不再加载内容. Twitter是一个很好的例子，它的Web应用程序在选中Offline和Disable cache时可以正常工作.

When I set the chrome devtools options to Offline and Disable cache the service worker doesn't load content anymore. A good example of how it is supposed to work is Twitter, their web app works when Offline and Disable cache are checked.

注意:我之前与服务人员一起创建了一些应用程序，它们在Chrome上正常运行.我不知道我在做什么错.

NB: I created a few apps before with service workers, and they worked properly on Chrome. I don't know what I'm doing wrong here.

推荐答案

您必须在脱机模式下测试应用，并明确提及index.html.我检查了 https://test-service-worker-97321.firebaseapp.com/index .html -效果很好.

You have to test your app in offline mode with an explicit mentioning of index.html. I checked https://test-service-worker-97321.firebaseapp.com/index.html - it works fine.

如果您希望您的应用程序可以离线运行而无需提及索引文档(以及所有其他途径)，则必须设置

If you wish your app to work in offline without index document mentioned (and for all other routes), you have to set up route redirection

请参见示例.此自定义ngsw-manifest.json将在构建过程中与自动生成的ngsw-manifest.json合并.

See the example. This custom ngsw-manifest.json will be merged with auto-generated one during the build.

这篇关于离线时@ angular/service-worker无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！