使用带有角度 cli 的服务人员时，进度条不起作用答案

【问题标题】：Progress bar doesn't work using service workers with angular cli使用带有角度 cli 的服务人员时，进度条不起作用
【发布时间】：2017-10-19 08:48:13
【问题描述】：

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

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

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

据我了解，服务人员不应该处理帖子请求，这很奇怪。

我们使用常规的HttpClient。

如何解决这个问题？

编辑：

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

【问题讨论】：

伙计们，当您开始通话时，您的进度为 0%。并在通话结束时重新设置。尝试：.subscribe(data =>{ this.data = data; // progress 50% this.someFunction() // progress 75% }); 完成 100% 时。
这正是我们所做的。这不适用于启用 AOT + 服务工作者
然后很快 ;) 你会在 0001 秒内看到 50%，然后在 0002 秒内看到 75%，在 0003 秒内看到 100%
不是这样的。我们正在上传 70mb 的文件，需要几分钟才能上传。我们只看到 0 和 100。两者之间什么都没有。如果我很难重新看到它，那么它一定是服务人员。
我的想法是倒计时 在订阅之外将它设置为几毫秒或任何时间。每次时间结束检查if(this.data === undefined) { //progress } else { //unsubscribe }。

标签： angular service-worker

【解决方案1】：

我建议更新您的服务人员以忽略发布请求。我有一个类似的问题，除了我没有使用角度。

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

【讨论】：

【解决方案2】：

Angular Service Worker 正在过滤你所有的 fetch 请求，当你需要它来更新你的文件上传进度时，你无法跟踪你的上传进度。考虑到这一点很重要，因为（也许）将来您需要这种请求（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
      }
   })

【讨论】：

我知道首选的 Angular 答案，但我们所做的是在 ngsw 文件上运行 gulp 任务并修改 if。我更喜欢这个解决方案，因为我可以控制缓存的内容，而不是 BE

【解决方案3】：

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

【讨论】：

这可以是评论;)
这与与服务人员合作有什么关系？

【解决方案4】：

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

在 ngsw-worker.js 文件中，查找 onFetch 函数。
修改 onFetch 函数，使其在检测到您的上传端点时停止执行。
参考下面的代码sn-p：

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

您可以查看此article 了解更多信息。

【讨论】：