进度条无法使用带有 Angular cli 的 Service Worker

Question

我们正在开发 Angular(4) 应用程序，并使用 cli 启用服务工作人员

一切都很好，除了文件上传进度条停留在 0%，只有完成后才会达到 100%。

我们怀疑这是由于 Service Worker 造成的，因为我们在开发环境中没有看到它。

奇怪的是，根据我的理解，服务人员不应该处理帖子请求。

我们使用常规HttpClient的。

如何解决这个问题？

编辑：

现在我确信这与服务工作人员有关，因为当我在应用程序选项卡中按“绕过网络”时，它工作正常。

Answer 1

Angular Service Worker 正在过滤您的所有获取请求，并且当您需要它来更新文件上传进度时，您无法跟踪您的上传进度。这是需要考虑的重要事项，因为（也许）将来您需要这种请求 (FETCH) 来执行其他操作。\n如果您使用的是最新版本的 Angular Service Worker，那么您可以在请求中添加标头，以便告诉 Angular Service Worker (ngsw)：嘿，不要\xc2\xb4t 过滤从此请求中获取调用！

\n\n

为了执行我上面提到的操作，您只需向 Http 调用添加一个标头，该标头必须为：\n { 'ngsw-bypass': 'true' }

\n\n

此标头将告诉 ngsw 必须让您的 httpClient 调用生成的所有 Fetch 传递。

\n\n

例如：

\n\n

HttpClient.post(apiPath, \n   formData, \n   { \n     reportProgress: true, \n     observe: 'events', \n     headers: new HttpHeaders({ 'ngsw-bypass': 'true' }) \n   }).subscribe({\n      next(events) {\n          if (events.type === HttpEventType.UploadProgress) {\n              // Math.round((events.loaded / events.total) * 100)\n          }\n      }, complete() {\n          // some code here\n      }, error(error) {\n          // some code here\n      }\n   })\n

\n