Question

我们正在开发Angular（4）app，我们使用cli

启用了服务工作者

一切都很好，只是我们有一个文件上传进度条，它停留在0％，并且只有在它完成后才会达到100％。

我们怀疑这是因为服务工作者，因为我们没有在我们的开发环境中看到它。

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

我们会定期使用HttpClient。

如何解决这个问题？

修改：

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

Answer 1

Angular Service Worker正在过滤您的所有提取请求，并且由于需要此更新更新文件上载进度，因此无法跟踪上载进度。考虑到这很重要，因为（也许）将来您需要这种请求（FETCH）来执行其他操作。如果您使用的是最新版本的Angular Service Worker，则可以在请求中添加标头，以告知Angular Service Worker（ngsw）：嘿，不要过滤从此请求中获取的调用！

为了执行我上面提到的操作，您只需要在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
      }
   })

Answer 2

我建议您先查看this上一个问题。它与你的情况不完全相同，但它可以作为一个初始点！你应该阅读progressEventObservable！

Answer 3

我建议您更新服务工作者以忽略发布请求。除了没有使用angular以外，我遇到了类似的问题。

self.addEventListener("fetch", event => {
    //This is the code that ignores post requests
    if (event.request.method === "POST") {
        return;
    }

    //The rest of your code to handle fetch events.
});

Answer 4

对于临时解决方法，您必须修改ngsw-worker.js。

在ngsw-worker.js文件中，查找onFetch函数。
修改onFetch函数，以便在检测到您的上传端点时停止执行。
请参阅下面的代码段：

onFetch(event) {
  if (event.request.url.indexOf('upload') !== -1) {
    return;
  }
  ...
}

您可以查看此article以获得更多信息。

使用具有角度cli的服务工作者，进度条不起作用

4 个答案: