Document service workers don't support upload progress for httpClient reportProgress

[epelc]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I believe service workers do not support reporting upload progress(download progress should work) since it basically acts as a proxy and converts all XMLHttpRequests to the fetch api. This should be documented to avoid confusion. I just spent several hours trying to figure out why upload progress doesn't work when you use service workers.

Some more info on why:

• Service workers act as a proxy for all requests

• Requests come in as XmlHttpRequest or fetch and are always sent out to your server as a fetch request.

• This can't be changed since service workers only support using the newer fetch api

• Fetch doesn't support upload progress(it's not in the spec yet)

“it [fetch] is currently lacking when it comes to request progression (not response progression).” https://fetch.spec.whatwg.org/#fetch-api

the first uses xhr(XMLHttpRequest) but goes out of the service worker as a fetch request which is why you can’t get upload progress info

Expected behavior

Basically the docs should state that reportProgress doesn't work when using a service worker due to fetch api limitations.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Documenting this would make using service workers less confusing. Without these docs you have to dig deep and understand/know about more internals for XmlHttpRequest, fetch, how service workers actually work, etc.

Environment

Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) Version 67.0.3396.87 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[epelc]

Here is the relevant feature spec that will add support fetch upload progress. It seems a ways off so docs would be good until then.

It's called FetchObserver
whatwg/fetch#607

[jenniferfell]

@epelc Thanks for this research and clarification. I'm checking with engineering to ensure that they agree this is a useful/correct doc addition.

[alxhub]

@jenniferfell this is a useful addition, albeit an esoteric one.

[tzahari]

It would be great if there is a possibility to configure the http request or the service worker not to intercept specific requests. Like mention in the #25007
Then the progress listener would work again.

[oliverjanik]

Since when are file uploads esoteric? Browser and library authors need to treat file uploads as a first class citizen. Literally every line of business app has some form of attachment upload.

[Jun711]

@tzahari
For a temporary workaround, you can modify your ngsw-worker.js. Look for onFetch function, modify the function so that it stops executing when detecting your upload endpoint.

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

You can check out this article for more information.

[sachq]

Is there any workaround other than modifying ngsw-worker.js?

Thanks.

[FreakTheMighty]

Should this be closed? It seems like #21191 resolves this issue.

@sachq

[epelc]

@FreakTheMighty thanks for the link. To be clear see the pr for that issue 6200732 There are now docs about setting a special header or other flags to bypass the service worker entirely for specific requests.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}