Progress bar doesn't work using service workers with angular cli

问题

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

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%.

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

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

We use regular HttpClient for it.

How can this be fixed?

Edit:

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.

回答1:

I would suggest updating your service worker to ignore post requests. I had a similar issue, except I wasn't using 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.
});

回答2:

I would recommend you to have a look to this previous question . It is not exactly the same case as yours but it can serve you as an initial point! You should read about progressEventObservable!

回答3:

For a temporary workaround, you have to modify your ngsw-worker.js.

In ngsw-worker.js file, look for onFetch function.
Modify onFetch function so that it stops executing when detecting your upload endpoint.
Refer to the code snippet below:

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

You can check out this article for more information.

回答4:

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!

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

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

For example:

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

来源：https://stackoverflow.com/questions/46826030/progress-bar-doesnt-work-using-service-workers-with-angular-cli

标签

angular

service-worker