Firebase Cloud Storage 'getDownloadUrl' Not Working With Ionic 'capacitor://localhost' iOS

[solimanware]

Operating System

iOS 16.5

Browser Version

Capacitor iOS WebView

Firebase SDK Version

9

Firebase SDK Product:

Storage

Describe your project's tooling

Ionic Angular Capacitor

Describe the problem

No output for getDownloadUrl when served from capacitor://localhost (native app) when running command 'ionic cap build ios' and running the project from Xcode but works from http://localhost when running command 'ionic cap run ios -l --external --open '

I tried using then/catch and tried try/catch with no hope, and checked the source code of the library and seems the lib doesn't through an error if there. I tried to edit the lib from node_modules but with the build process of tree shaking, minification, uglification, and removing console.logs() that was super hard. I know that Google mustn't support strange protocols like capacitor://localhost but that how 30% of the market apps uses right now, can I get little help please what is going wrong? maybe some whitelisting maybe some storage permissions? I spent 10 hours straight debugging this, but with no good news...

Steps and code to reproduce issue

in 'http://localhost'

getDownloadURL(storageRef)
          .then((res) => {
            console.log(res); //working
          })
          .catch((err) => {
            console.log(err); //no output
          });

in 'capacitor://localhost'

getDownloadURL(storageRef)
          .then((res) => {
            console.log(res); //no output
          })
          .catch((err) => {
            console.log(err); //no output
          });

[simhi27]

Any updates / workarounds here?

[TylerAHolden]

Looks like it has to do with the path parsing somewhere under the hood (specifically related to CapacitorHttp if you have it enabled in the config to patch fetch and XMLHttpRequest). The quick fix is, when using getDownloadURL from capacitor:// (in a native app) replace all of the forward slashes with '%2F'. But this breaks web hosted apps. So my final code looks like this:

const modifiedImagePath = Capacitor.isNativePlatform()
      ? image.replaceAll('/', '%2F')
      : image;
const downloadUrl = await getDownloadURL(ref(storage, modifiedImagePath));

[google-oss-bot]

Hey @solimanware. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@solimanware if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.