@angular/service-worker 离线时不工作 [英] @angular/service-worker not working when offline

问题描述

我从未让 Angular Mobile Team 的 Service Worker 正常工作，此时我想我忘了启用某些东西，因为它自最初发布以来一直没有工作.即使它在我离线时在 Google Chrome(智能手机和台式机)上安装并运行，它也不再工作，更新后也会随机崩溃.

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

• 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.js 和 worker-basic.min.js.所以一切看起来都很好

• <小时>

  生成的ngsw-manifest.json:

  <小时>

  已安装并运行的 Service Worker:测试可用

  <小时>

  当我将 chrome devtools 选项设置为 Offline 和 Disable cache 时，Service Worker 不再加载内容.一个很好的例子是 Twitter，当 Offline 和 Disable cache 被选中时，他们的网络应用程序工作.

  注意:我之前与 Service Worker 一起创建了一些应用，它们在 Chrome 上运行正常.我不知道我在这里做错了什么.

  解决方案

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

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

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

  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
  • 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.

  ---

  The generated dist directory:

  ---

  The generated ngsw-manifest.json:

  ---

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

  ---

  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.

  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.

  解决方案

  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

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

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