How to display web content [the right way] on iOS and Android using QML

Question

I'd like to develop and release a Qt/QML app on iOS and Android, using Qt 5.5, and I'm trying to figure out a way to display simple web content (like the Facebook login page) in my QML app.

What I find really confusing is the fact that there are multiple classes that have a similar name but don't work on all platforms or are lacking some required functionality.

Here's the options I found out:

---

Option 1: WebView (QtWebView 1.0)

http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html

Pros:

• Works on iOS
• Works on Mac OS X

Cons:

• Can not use it for social login because we are missing a "going to load URL" signal which we can use to capture a successful login/error.

---

Option 2: WebView (QtWebKit 3.0)

http://doc.qt.io/qt-5/qml-qtwebkit-webview.html

Pros:

• Apparently has the required features to capture social login (onNavigationRequested(request))
• Works on OS X

Cons:

• Doesn't work on iOS. When trying to build for the iOS Simulator I get:

QQmlApplicationEngine failed to load component http://badkitteh.local:8888/backend/:6 module "QtWebKit" is not installed

I tried adding webkit and webkitwidgets to the .pro file without success. (wtf?)

---

Option 3: WebEngineView (QtWebEngine 1.0)

http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html

Pros:

• Works on OS X.
• Apparently has the required method to capture social login/errors (loadingChanged(loadRequest)).

Cons:

• Requires QtWebEngine::initialize() call in main().
• Requires me to manually add webengine to QT in the .pro file. This makes it build/launch on OS X but still not on iOS. Wtf?
• Does not work on iOS:

QQmlApplicationEngine failed to load component http://badkitteh.local:8888/backend/:6 module "QtWebEngine" is not installed

---

I didn't get to test Android yet, but it seems that QtWebView is the only thing that works across multiple platforms without having to use separate QML files. Unfortunately without being able to catch the URL change/load requests.

This is frustrating.

How do I do I get a simple WebView based social login to work within the app across iOS and Android without using external libraries/tools etc? Either I'm missing something here or the WebView situation is really messed up for QML/Qt right now. Why are there so many options? Why is there no simple wrapper for UIWebView on iOS and the equivalent on Android?

Answer 1

I don't know exactly what you're trying to accomplish, but QtWebView (the only option on mobile devices) does have a runJavaScript function, which you can use to inject some JavaScript into a web page and then relay the result of the JavaScript back to a callback function (a QML function). The injected JavaScript can set up whatever event listeners you want within the page, or if you want to poll for changes you can do a window.setTimeout. It's somewhat convoluted, but you can probably hack out a solution that way.