使用带有 angular cli 的 Service Worker 时进度条不起作用 [英] Progress bar doesn't work using service workers with angular cli

问题描述

我们正在开发 Angular(4) 应用程序，我们使用 cli 启用了 Service Worker

We are developing Angular(4) app and we enabled service workers using the cli

除了我们有一个文件上传进度条停留在 0% 并且只有在它完成后才进入 100% 之外，一切都很好.

Everything works great except that we have a file upload progress bar that is stuck on 0% and only after it finishes it goes to 100%.

我们怀疑是因为 Service Worker，因为我们在开发环境中没有看到它.

We suspect it's because of the service worker since we do not see it on our dev env.

奇怪的是，根据我的理解，Service Worker 不应该处理帖子请求.

What is strange that from my understanding service workers shouldn't work on posts requests.

我们使用常规的HttpClient.

如何解决这个问题?

编辑:

现在我确定它与 Service Worker 相关，因为当我在应用程序选项卡中按下绕过网络"时，它工作正常.

Now I'm sure it is something related to service workers because when I press on "Bypass for network" in the application tab it works fine.

推荐答案

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

Angular service worker is filtering all yours fetch request and as you need this to update your file upload progress, you can not track your upload progress. This is something imporant to take in account because (maybe) in the future you need this kind of request (FETCH) to perform other actions. If you are using latest version of angular service worker, then you can add a header to your request in order to tell Angular Service Worker (ngsw): Hey don´t filter fetch calls from this request!

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

In order to do what I mentioned above, you just have to add a header to your Http call, the header has to be: { 'ngsw-bypass': 'true' }

这个标头会告诉 ngsw 必须让所有由你的 httpClient 调用产生的 Fetch 传递.

This header will tell to ngsw that have to let pass all Fetch produced by your httpClient call.

例如:

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
      }
   })

这篇关于使用带有 angular cli 的 Service Worker 时进度条不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！