QML Webview doesn't render web content properly on Android

[Antonio Ortiz]

Hi, I'm trying to load a content from an external web page in my QtQuick app for Android.
I tried to use a Webview, but it doesn't load properly. I researched and tried to discard a platform error, so I program an app with the Android SDK using a Webview and the error persist.

Searching in Android forum I found a method of the Webview Object that fixed the problem: setDomStorageEnabled(). For what I understand it allows the Webview to use the local storage to store web content while loading.

So I tried to find a similar solution for QML. and found three:

• WebView.loadHtml(): that only show the url as a text in my view.
• onNavigationRequested(): not available because I'm usin Qt ver 5.9.2
• WebEngineView: not available in Android.

I would like to know if there is a way to load an external Web Site in Android

[raven-worx]

@Antonio-Ortiz
you used the QtWebview module right?
This module loads a native android Webview view and places it on top of the QML display. Also the API is not that rich (yet).
I think you should place a feature request for this option.

[Antonio Ortiz]

Thanks for your reply.
Yes a add the webview module to my .pro file and initialize it with QtWebView::initialize(); in my main function.
When I run my code in Android I get this error:

I chromium: [INFO:CONSOLE(7)] "TypeError: Cannot read property 'getItem' of null
I chromium: at Object.<anonymous> (https://app.pagoflash.com/dist/_jsall.js?v=18:39:20798)
I chromium: at Object.invoke (https://app.pagoflash.com/dist/_jsall.js?v=18:5:6453)
I chromium: at S.instance (https://app.pagoflash.com/dist/_jsall.js?v=18:5:30874)
I chromium: at p (https://app.pagoflash.com/dist/_jsall.js?v=18:5:18309)
I chromium: at g (https://app.pagoflash.com/dist/_jsall.js?v=18:5:15131)
I chromium: at https://app.pagoflash.com/dist/_jsall.js?v=18:5:14776
I chromium: at https://app.pagoflash.com/dist/_jsall.js?v=18:4:27894
I chromium: at m.$eval (https://app.pagoflash.com/dist/_jsall.js?v=18:7:27217)
I chromium: at m.$apply (https://app.pagoflash.com/dist/_jsall.js?v=18:7:27450)
I chromium: at https://app.pagoflash.com/dist/_jsall.js?v=18:4:27850", source: https://app.pagoflash.com/dist/_jsall.js?v=18 (7)
W art : Suspending all threads took: 13.011ms
I art : Background sticky concurrent mark sweep GC freed 33625(1649KB) AllocSpace objects, 4(216KB) LOS objects, 33% free, 4MB/6MB, paused 14.746ms total 58.962ms 

[raven-worx]

@Antonio-Ortiz said in QML Webview doesn't render web content properly on Android:

When I run my code in Android I get this error:
I chromium: [INFO:CONSOLE(7)] "TypeError: Cannot read property 'getItem' of null

But this rather looks like a mistake in the JavaScript code, where it is tried to access a method of an object which is null.
I don't see how this should be any fault of the engine?!

[Antonio Ortiz]

I check this forum thread that solve the problem in Android
Android Webview: “Uncaught TypeError: Cannot read property 'getItem' of null”

It seems that it is necesary to save the DOM in the local storage. In my case the external url have multiple javascript dependencies load from external third parties

[Antonio Ortiz]

I had been trying to understand more this error and run several time my code.
This is the list of error I had collected from the debugger:

W linker  : /data/data/co.dising.sandwichlight/qt-reserved-files/qml/QtWebView/libdeclarative_webview.so: unused DT entry: type 0x1d arg 0x123e

W linker  : /data/data/co.dising.sandwichlight/qt-reserved-files/qml/QtWebView/libdeclarative_webview.so: unsupported flags DT_FLAGS_1=0x81

W System  : ClassLoader referenced unknown path: /system/app/WebViewGoogle/lib/arm

W cr_media: Requires BLUETOOTH permission

W cr_AwContents: onDetachedFromWindow called when already detached. Ignoring

E libEGL  : validate_display:255 error 3008 (EGL_BAD_DISPLAY)
W VideoCapabilities: Unrecognized profile 2130706433 for video/avc
W VideoCapabilities: Unrecognized profile 2130706434 for video/avc
W VideoCapabilities: Unsupported mime video/divx
W VideoCapabilities: Unsupported mime video/divx4
W VideoCapabilities: Unsupported mime video/mp4v-esdp
W VideoCapabilities: Unsupported mime video/mp4v-esdp
I VideoCapabilities: Unsupported profile 4 for video/mp4v-es
W cr_BindingManager: Cannot call determinedVisibility() - never saw a connection for the pid: 13647

I chromium: [INFO:CONSOLE(7)] "TypeError: Cannot read property 'getItem' of null
I chromium:     at new <anonymous> (https://app.pagoflash.com/dist/_jsall.js?v=20:49:20802)
I chromium:     at Object.invoke (https://app.pagoflash.com/dist/_jsall.js?v=20:5:6453)
I chromium:     at S.instance (https://app.pagoflash.com/dist/_jsall.js?v=20:5:30874)
I chromium:     at p (https://app.pagoflash.com/dist/_jsall.js?v=20:5:18309)
I chromium:     at g (https://app.pagoflash.com/dist/_jsall.js?v=20:5:15131)
I chromium:     at https://app.pagoflash.com/dist/_jsall.js?v=20:5:14776
I chromium:     at https://app.pagoflash.com/dist/_jsall.js?v=20:4:27894
I chromium:     at m.$eval (https://app.pagoflash.com/dist/_jsall.js?v=20:7:27217)
I chromium:     at m.$apply (https://app.pagoflash.com/dist/_jsall.js?v=20:7:27450)
I chromium:     at https://app.pagoflash.com/dist/_jsall.js?v=20:4:27850", source: https://app.pagoflash.com/dist/_jsall.js?v=20 (7)

The url I'm trying to load is: https://app.pagoflash.com/pf/sandwichLight-Prueba

Also, I been trying to replicate the solutions of this post: https://stackoverflow.com/questions/35926287/classloader-referenced-unknown-path-data-app

[Antonio Ortiz]

I found the solution thanks to <annulen|home> at the irc qtwebkit channel.
He points me to the file in the Qt source that implements the qml WebView object for Android. In that class the setDomStorageEnabled() wasn't call, so the webpage I was trying to open doesn't render properly.
I add the methods call in the file in the Qt source an rebuild it and everything render as it should.