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

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

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

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

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

我们使用常规的HttpClient for it.

如何解决这个问题？

Edit:

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

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

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

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

例如：

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