Ionic/Capacitor iOS App does not load script from a third party source

Question

I am currently working on an ionic/react app using capacitor to "compile" it into android and iOS Apps. Right now the app itself only has a simple calendar widget and an audio player playing a radio broadcast from radiojar.com.

This radio stream is provided by a script i initially inserted trough a script tag in the index.html file in the body like so:

And then reference it within my Player Component (in the useIonViewDidEnter) like so:

 rjq('#rjp-radiojar-player').radiojar('player', {
  "streamName": "stream-url"
 });

To make sure the variable rjq is not unkown when building the app etc. before loading the external script, i declare it globally in the Player.js file:

declare var rjq;

It works on:

Windows Browser (Chrome, Firefox)
Android (Emulator and real Xiaomi and Motorola phones)
MacOS Safari (Web)

It does not work on:

XCode Iphone (emulator)

In XCode i see the following error message:

APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 122796460
⚡️[error] - {}

⚡️------ STARTUP JS ERROR ------
⚡️ReferenceError: Can't find variable: rjq
⚡️URL: capacitor://localhost/static/js/main.31871104.chunk.js
⚡️main.31871104.chunk.js:1:583
⚡️See above for help with debugging blank-screen issues
⚡️[log] - Player off
⚡️[error] - {}

What i tried so far: My feeling is the script is not loaded therefore i explored mainly in that direction

Move script tag in index.html in head (made no difference)
Dynamic load in the Player.ts file (i tried appending it to body and head, see head version below)

Nr. 2 looks like this:

useIonViewDidEnter(() => {
    console.log("Hello");
    const radioScript = document.createElement("script");
    radioScript.src = "//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js";
    radioScript.async = true;
    radioScript.type = "text/javascript";
    document.head.appendChild(radioScript);

    radioScript.onload = function(){
        console.log("Loaded script");
        rjq('#rjp-radiojar-player').radiojar('player', {
            "streamName": "stream-url"
        });
    }
});

And the XCode log:

⚡️Loading app at capacitor://localhost...
Reachable via WiFi
APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 66527687
⚡️[log] - Hello

Conclusion

Does any one know what leads to the script not being loaded? Or mabye sees/knows a different problem in my approach, i would be thankful for any advice and or hint.

Update

I managed to load the script so it is available at runtime now, but the code referencing it is still not being executed.

What solved the loading problem: Add https to the src of the script tag

What is not yet working: I think the stream of the player or the player itself is still not initiated. I put a console.log within one of these code snippets, but it is not visible in the console.

rjq('#rjp-radiojar-player').radiojar('player', {
            "streamName": "stream-url"
        });

Ionic/Capacitor iOS App does not load script from a third party source

0 Answers