External Script does not execute (iOS)

Capacitor
#1

I am currently working on an ionic/react app using capacitor to make 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:

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>

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)
  • XCode IPhone Emulator Safari Browser

It does not work on:

  • XCode Iphone (emulator) App

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

  1. Move script tag in index.html in head (made no difference)
  2. 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

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

<script type="text/javascript" src="https://www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>

What is not yet working:
I think the stream of the player or the player itself is still not initiated in the iOS App, but i do not know why.
Could there be a missing permission i have to add in XCode or the capacitor config?

#2

If you (or the script) don’t provide a protocol, then the app protocol is used, and Capacitor apps use capacitor as protocol.

So urls like //www.radiojar.com become capacitor://www.radiojar.com, and they are not reachable since they are online and capacitor:// will search in your app assets.

You should use the https url as you already did and contact radiojar so they do the same in their internals.