"Unable to detect a web browser" when loading iframe in Clickable HTML app

[rineez]

I'm just getting started in ubuntu touch development and the clickable environment.

I am trying to create a React app that loads a part of its major features in an iframe.(The fact that I'm using react is probably irrelevant here because it is just static html+js when it is deployed)
Currently I'm testing it in an ubuntu desktop environment(20.04.1) using "clickable desktop" command.
I was able to compile my react app as a static HTML app and it is running as expected when I open my index.html in a normal browser.
Then I created a clickable app using the HTML option and placed my react app's build inside the www directory of the clickable app.
Then I run it using "clickable desktop" command.
The app actually loads and my normal react components are working. But the React component that loads iframe is failing. This react component basically loads another web page inside the iframe.
When my clickable app tries to load this iframe it is failing with the following error in the terminal window:
Unable to detect a web browser to launch <followed by the url being loaded in iframe>

To demonstrate my case I have prepared an example code in my github repo:
https://github.com/rineez-livares/clickable-iframe-demo

It is trying to load google search in iframe as an example.

You can try opening the www/index.html file in your browser and it will work. But in "clickable desktop" environment it shows error like:
Unable to detect a web browser to launch 'https://www.google.com/search?igu=1&channel=fs&client=ubuntu&q=test'

[arubislander]

@rineez The error you get is the app in desktop mode trying to find a browser to open the link in. If you ran the app on a device it would open the link in Morph browser (or one of the other browsers, if you had installed any of those). I have not gotten your scenario to work using webapp-container.

I have created another demo project using QML and QtWebEngine. And that does seem to work. Give it a go and see if it does what you need.

[rineez]

@arubislander Thanks a lot. I'll give it a try and come back soon

[rineez]

@rineez This is now working well to load iframe.
Though I don't really understand why the HTML app was trying to find a browser to open the iframe, because I have been imagining the HTML app is actually being loaded inside some kind of WebView component(browser engine) internally.
Now I see I must have been misunderstanding how it works. So I would love to know a bit more about how the HTML app template actually works in clickable.

[arubislander]

@rineez no, you understood correctly. See the webapp-container documentation for more information.

The issue you are having is that the 'main url' is on the filesystem and you are embedding a remote site in the iFrame. The webapp-container has parameters to controll what domains get opened in the container and which ones trigger being opened in an external browser. But it would seem there is no way to configure it so that local content and remote content is openend in the container.

[rineez]

@arubislander Ah! That makes total sense now. Thanks.