angular - 进度条无法使用带有 Angular cli 的服务 worker

Question

我们正在开发 Angular(4) 应用程序并使用 cli 启用服务 worker

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

我们怀疑这是因为 service worker，因为我们没有在我们的开发环境中看到它。

据我所知，service workers 不应该处理帖子请求，这有什么奇怪的。

我们为此使用常规的 HttpClient。

如何解决这个问题？

编辑:

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

Answer 1

Angular Service Worker 正在过滤你所有的获取请求，因为你需要它来更新你的文件上传进度，你无法跟踪你的上传进度。这是需要考虑的重要事项，因为(也许)将来您需要这种请求 (FETCH) 来执行其他操作。如果您使用的是最新版本的 Angular Service Worker，那么您可以在您的请求中添加一个 header ，以告诉 Angular Service Worker (ngsw):嘿，不要过滤来自该请求的提取调用!

为了完成我上面提到的，你只需要在你的 Http 调用中添加一个 header ， header 必须是: { 'ngsw-bypass': 'true' }

此 header 将告诉 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
      }
   })