Use of tus client in a service worker

[jrtcppv]

Question
I would like to do uploads inside of a service worker so that they will continue whenever the browser is open. Has anyone tried this? If not I may try to get it working on a branch, would there be interest in merging a pull request?

Setup details
Please provide following details, if applicable to your situation:

• Runtime environment: In a service worker.
• Used tus-js-client version: 1.8.0-1
• Used tus server software: tusd

[Acconut]

I am not aware that someone has tried to run tus-js-client in a service worker, but we would be interested in getting that working. Personally, I don't know what challenges are presented when dealing with service workers, so it would be nice if you could report back with your findings.

[jrtcppv]

Unfortunately it looks like XMLHttpRequest has been deprecated and is not available in service workers:

https://stackoverflow.com/questions/38393126/service-worker-and-ajax

I am going to try updating upload.js to use fetch... Is there a reason you have stayed away from using the fetch API thus far? I know it will break compatibility with Internet Explorer.

[Acconut]

I am going to try updating upload.js to use fetch... Is there a reason you have stayed away from using the fetch API thus far?

Yes, we intentionally chose XMLHttpRequest since at the time the Fetch API didn't offer upload progress event and a method to abort a HTTP request. Both are two critical components for tus-js-client. Over the time, I have read about proposals to add these features to Fetch but I am not sure what the current status on these features looks like. It would be interesting to see if things have changed now.

[jrtcppv]

After a bit of research it looks like there is quite a bit of clamoring for upload progress on fetch. There is a proposal to implement "FetchObservers":

whatwg/fetch#607
https://youtu.be/DETklM4JtyQ

But it might be a while before we see it in browsers. So it seems my options are:

1. Transition upload.js to use fetch, give up progress updates and wait on FetchObserver (or help).
2. Find a polyfill that reintroduces XHR in service workers.

Option 2 seems sort of regressive, but may be easier. I'll post an update if I get either working successfully.

[jrtcppv]

Just wanted to give you an update, I got a fetch implementation working on a branch here:

https://github.com/jrtcppv/tus-js-client/tree/service-worker

I have tested it inside a service worker on a few files and it seems to work. My plan is to use chunked uploads and broadcast progress updates using the onProgress or onChunkComplete callback (both seem to function). I suspect you will want to wait on FetchObserver to fully replace XHR, but maybe it could be incorporated as an option? It might be a pain to maintain both though.

Also just FYI it's likely I broke significant functionality in this branch (react native for example), I assumed I would be the only one using it for now.

[Acconut]

Wow, I am glad to hear that you got it working! Congratulations on that 🎉 Is the tus.Upload#abort method also functioning as intended?

I suspect you will want to wait on FetchObserver to fully replace XHR, but maybe it could be incorporated as an option? It might be a pain to maintain both though.

I don't have concrete numbers on the browser support of FetchObserver and AbortController but I would be hesitant to completely switch away from XHR. Incorporating it as an additional HTTP stack would be possible, we currently do something similar to emulate XHR inside Node.js. However, as you said, this might be a lot of work for limited benefit.

[jrtcppv]

Thanks! I was able to add an abort call to my application and test tus.Upload#abort in the middle of a fetch and it seemed to work fine on Chrome. AbortController is implemented on all browsers except IE, just like fetch. FetchObserver is still just a proposal and has not been implemented anywhere. I will keep an eye on its progress but am stuck with chunked uploads for upload progress for now. Will let you know if I update the branch with FetchObserver if/when it is ever implemented.

Thanks very much for your help!

[Acconut]

Sounds good, thank you very much for your efforts! We are always happy to hear back from you