FR: Use fetch in firebase/storage instead of XMLHttpRequest

[poltak]

[REQUIRED] Describe your environment

• Operating System version: macOS 12.5.1
• Browser version: Chrome 105.0.5195.102
• Firebase SDK version: 9.9.4
• Firebase Product: storage

[REQUIRED] Describe the problem

I'm trying to use v9 SDK exported firebase/storage methods like uploadString, uploadByte within the context of a manifest v3 Chrome extension's Service Worker. Service workers lack the XMLHttpRequest web API, which is used to implement the network request part of these methods.
See the following line in the source code for where the XMLHttpRequest API is used:
https://github.com/firebase/firebase-js-sdk/blob/master/packages/storage/src/platform/browser/connection.ts#L42

I saw similar issues about other parts of the FB web SDK, which resulted in the the move to use fetch API for this implementation, and was wondering if it could be done for this storage logic too, to afford service worker/MV3 extension support?

I haven't included any reproducible example, as I think it is fairly clear from the above linked line in the source code and the fact that Service Workers don't support XMLHttpRequest. Though please let me know if you need any further info

Related issues:

• Chrome extension Service worker "ReferenceError : XMLHttpRequest is not defined" Firestore #6124
• FR: Use fetch() in v9 instead of XMLHttpRequest #4912
• runTransaction doesn't work in Chrome extension MV3 #6483

[maneesht]

Hi @poltak - this is something we are looking into, but do not have an ETA for. Thank you for filing this.

[poltak]

Good to hear @maneesht

For anyone stumbling onto this issue with the same problem: We ended up using the xhr-shim package on NPM to polyfill global['XHMLHttpRequest'], after which firebase/storage works fine in our web extension's background service worker.

[maneesht]

@poltak, out of curiosity, are you attempting to use Firebase Storage for uploading files in a service worker?

[poltak]

Yes, via the uploadBytes and uploadString methods

[maneesht]

@poltak xhr-shim doesn't allow for progress events, is that not part of your use-case?

[poltak]

No it's currently not part of our use-case. Many of these uploads can happen as part of longer running "sync" function, where we currently only count each as pending or done.

[maneesht]

@poltak Thank you for describing this.

As upload status is not widely supported and is a critical feature for Firebase Storage, we cannot switch over to use fetch at this time. We will revisit this when proper browser support has been added.

[poltak]

I see. As I didn't need to use this feature, I didn't realize it was a limitation of the fetch API until now. A bit of a reading around tells me it is an ongoing discussion in different browsers (for ref: try googling "ReadableStream as Request.body in fetch API"). Hopefully there's wider support in the near future. Thanks for the clear comms @maneesht !

[umrashrf]

Just ran into this issue with Chrome Extension V3 environment. The service worker of Chrome Extension V3 no longer supports XMLHttpRequest and has fetch().

"dependencies": {
    "firebase": "^10.1.0",

[shamoons]

Same issue: "firebase": "^10.3.1",

[Georg7]

Same issue. Using "firebase": "^10.4.0"