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

Question

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.

I guys you do this progress is 0% when you start your call. And set it again when the call end. Try: .subscribe(data =>{ this.data = data; // progress 50% this.someFunction() // progress 75% }); When finish 100%. — Swoox
– Swoox, Commented Oct 19, 2017 at 9:08
That exactly what we have done. This doesn't work with AOT + Service workers enabled — doron
– doron, Commented Oct 19, 2017 at 9:20
Then it goes to quick ;) You see 50% in 0,001 sec then 75% in 0,002 sec and 100% in 0,003 sec — Swoox
– Swoox, Commented Oct 19, 2017 at 9:22
It is not that. We are uploading 70mb files which takes few minutes to upload. We only see 0 and 100. nothing in between. If i hard reresh i see it so it must be the service workers. — doron
– doron, Commented Oct 19, 2017 at 10:00
My Idea would be make a countdown outside the subscribe set it one a few milisecond or what ever. Every time the time finish it check if(this.data === undefined) { //progress } else { //unsubscribe }. — Swoox
– Swoox, Commented Oct 19, 2017 at 10:14

Cristian Caram Peñalver · Accepted Answer · 2020-01-23 15:26:32Z

8

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

answered Jan 23, 2020 at 15:26

Cristian Caram Peñalver

3915 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doron Over a year ago

I know that preferred Angular answer but what we have done is to have a gulp task running on the ngsw file and modifies if. I like this solution better because I have the control of what’s been cached and not the BE

Mike Aug 20 at 7:30

Speechless why it is not mentioned in the docs...

joeshmoe301 · Accepted Answer · 2019-01-30 19:50:16Z

3

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

answered Jan 30, 2019 at 19:50

joeshmoe301

1,4382 gold badges14 silver badges29 bronze badges

Comments

m33n · Accepted Answer · 2017-10-19 09:22:39Z

0

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!

answered Oct 19, 2017 at 9:22

m33n

1,76118 silver badges41 bronze badges

2 Comments

Swoox Over a year ago

This can be a comment ;)

doron Over a year ago

How is that related to working with service workers?

Jun · Accepted Answer · 2019-04-02 05:11:44Z

0

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.

answered Apr 2, 2019 at 5:11

Jun

3,0545 gold badges34 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related