Qt for WebAssembly: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add information bout wasm file footprint)
(→‎Known issues and platform notes: Add supported modules)
(27 intermediate revisions by 3 users not shown)
Line 1: Line 1:
Qt for WebAssembly makes it possible to build Qt applications as WebAssembly modules in order to target Web browsers.
Qt for WebAssembly makes it possible to build Qt applications as WebAssembly modules in order to target Web browsers.


Qt for WebAssembly is currently in development. A tech preview release is scheduled for release with Qt 5.11.
Qt for WebAssembly is currently in development. A second tech preview release is scheduled for release with Qt 5.12.0.


This Wiki page is also a work in progress, please see the development tracking bug for more information: https://bugreports.qt.io/browse/QTBUG-63917
The main development tracking bug is https://bugreports.qt.io/browse/QTBUG-63917.


===== Getting the code =====
===== Getting the code =====


The sources can be downloaded from your Qt Account, in the Downloads section. For the latest revision of the code, you can also check it out from our git repositories directly:
The sources can be downloaded from your Qt Account, in the Downloads section. For the latest revision of the code, you can also check it out from our git repositories directly: http://code.qt.io/cgit/qt/qt5.git/
 
qtbase branch: [http://code.qt.io/cgit/qt/qtbase.git/log/?h=wip/webassembly wip/webassembly] ( git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git )
 
qtdeclarative branch: [http://code.qt.io/cgit/qt/qtdeclarative.git/log/?h=wip/webassembly wip/webassembly] ( git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git )
 
Other repositories should use the "5.11" branch to be compatible.


===== Building Qt =====
===== Building Qt =====


Requirements: [http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html Emscripten] (known-good version: 1.37.33)
Requirements: [http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html Emscripten] (known-good version: 1.38.16)


Supported host dev platforms: linux, macOS (Windows is not currently supported)
Supported host dev platforms: Linux, macOS, [https://docs.microsoft.com/en-us/windows/wsl/install-win10 Windows Subsystem for Linux]


<blockquote>./configure -xplatform emscripten -confirm-license -opensource -developer-build -release -static -no-thread -nomake tests -nomake examples  -no-dbus -no-headersclean -no-feature-networkinterface  -system-libpng -no-ssl -no-warnings-are-errors</blockquote><blockquote>make</blockquote>
<blockquote>./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase</blockquote>
<blockquote>make module-qtbase module-qtdeclarative [other modules] </blockquote>


===== Building and running applications =====
===== Building and running applications =====
Line 31: Line 26:


Note: If you are using Firefox, you can use CTRL+SHIFT+K to open the debug console.
Note: If you are using Firefox, you can use CTRL+SHIFT+K to open the debug console.
'''Known issues - 5.11 Tech Preview Beta'''
* Qt Quick will currently use the "software" backend, which will affect performance for complicated UIs and also disable the use of shader effects. A fix for this is coming soon.


===== Known issues and platform notes =====
===== Known issues and platform notes =====


* Included Qt modules: QtBase, QtDeclarative, QtQuickControls2
* Supported development host systems: Linux and MacOS, and [https://docs.microsoft.com/en-us/windows/wsl/install-win10 Windows Subsystem for Linux].   
* Supported development host systems: Linux and MacOS, and [https://docs.microsoft.com/en-us/windows/wsl/install-win10 Windows Subsystem for Linux].   
* Supported browsers: We develop and test mainly on desktop systems. Tested browsers include Chrome, Safari, Opera and Firefox. Some mobile testing is done on Android and iOS devices. Safari on iOS currently failing to load Qt applications with an "out of executable memory" error.  
* Supported browsers: We develop and test mainly on desktop systems. Tested browsers include Chrome, Safari, and Firefox. Some mobile testing is done on Android and iOS devices. Safari on iOS currently failing to load Qt applications with an "out of executable memory" error.  
* Supported Qt modules, in "make module-foo" form:
* Expected footprint (download size): Wasm modules as produced by the compiler can be large, but compress well. {| class="wikitable" !Example !gzip !brotli |- |helloglwindow (QtCore + QtGui) |2.8M |2.1M |- |wiggly widget (QtCore + QtGui + QtWidgets) |4.3M |3.2M |- |SensorTag (QtCore + QtGui + QtWidgets + QtQuick + QtCharts) |8.6M |6.3M |} Compression is typically handled on the web server side, using standard compression features: the server compresses automatically or picks up pre-compressed versions of the files. There's generally no need to have special handling of wasm files.  
** module-qtbase module-qtdeclarative module-qtquickcontrols2 module-qtwebsockets module-qtmqtt module-qtsvg module-qtcharts
* Due to disabled threading support in WebAssembly at the moment, the configure string above will build Qt with no threading support. If your application relies on threading, this may lead to unexpected effects.
** These should build without error; other modules may work but have not been verified.
* Debugging: Qt debug and logging output is printed on the JavaScript console, which can be accessed via browser "Developer Tools" or similar.
* Due to disabled threading support in WebAssembly at the moment, the configure string above will build Qt with no threading support. Applications that relies on threading may not work.
* Nested event loops are not supported. Applications should not call e.g. QDialog::exec() or create a new QEventLoop object.
* Nested event loops are not supported. Applications should not call e.g. QDialog::exec() or create a new QEventLoop object.
* Qt renders application content to a canvas element, and does not use (other) native DOM elements. This means accessibility (screen readers) are not supported and that text inputs won't trigger virtual keyboards.
* WebGL is required, even for applications which do not use OpenGL themselves. All relevant browsers support WebGL, but note that some browsers blacklist certain older GPUs. The Qt loader will detect this and display an error message.
* Applications do not have access to system fonts. Font files must be distributed with the application, for example in Qt resources. Qt for WebAssembly itself embeds one such font.
* Applications do not have access to system fonts. Font files must be distributed with the application, for example in Qt resources. Qt for WebAssembly itself embeds one such font.
* Qt renderes application content to a canvas element, and does not use (other) )native DOM elements. This means accessibility (screen readers) are not supported and that text inputs won't trigger virtual keyboards.
* High-DPI and scaling: High-DPI rendering is supported, and so is setting the overall UI visual size using the browser zoom feature. Browser font size (and type) settings have no effect on Qt applications.
* Network access: The web sandbox limits network access to a subset of what is available for native apps.
** QNetworkAccessManager http requests to the web page origin server, or to a server which supports CORS.
** QWebScoket connections to any host.
** TCP and UDP socked tunneling using over WebSockets using a websockify server [implemented by Emscripten, not tested]
* Clipboard support: The application clipboard is currently not integrated with the system clipboard.
* On macOS, there may be artifacts of uninitialized graphics memory on some Qt Quick Controls 2 components, such as checkboxes.
 
Expected footprint (download size): Wasm modules as produced by the compiler can be large, but compress well.
 
{| class="wikitable"
|-
! Example  !! gzip !! brotli
|-
| helloglwindow (QtCore + QtGui) || 2.8M || 2.1M
|-
| wiggly widget (QtCore + QtGui + QtWidgets) || 4.3M || 3.2M
|-
| SensorTag (QtCore + QtGui + QtWidgets + QtQuick + QtCharts) || 8.6M || 6.3M
|}


You can find a full list of known issues here: https://bugreports.qt.io/browse/QTBUG-63917
Compression is typically handled on the web server side, using standard compression features: the server compresses automatically or picks up pre-compressed versions of the files. There's generally no need to have special handling of wasm files.

Revision as of 11:54, 23 November 2018

Qt for WebAssembly makes it possible to build Qt applications as WebAssembly modules in order to target Web browsers.

Qt for WebAssembly is currently in development. A second tech preview release is scheduled for release with Qt 5.12.0.

The main development tracking bug is https://bugreports.qt.io/browse/QTBUG-63917.

Getting the code

The sources can be downloaded from your Qt Account, in the Downloads section. For the latest revision of the code, you can also check it out from our git repositories directly: http://code.qt.io/cgit/qt/qt5.git/

Building Qt

Requirements: Emscripten (known-good version: 1.38.16)

Supported host dev platforms: Linux, macOS, Windows Subsystem for Linux

./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase

make module-qtbase module-qtdeclarative [other modules]

Building and running applications

/path/to/qmake && make

Start a web server (e.g. "python -m SimpleHTTPServer"), open e.g. localhost:8000/appname.html in a web browser. We test on Chrome, Firefox, and Safari (all desktop). Firefox (nightly) currently has the most performant wasm compiler, and is recommended for dev work.

You can also use:

/path/to/emscripten/emrun --browser=firefox appname.html

Note: If you are using Firefox, you can use CTRL+SHIFT+K to open the debug console.

Known issues and platform notes
  • Supported development host systems: Linux and MacOS, and Windows Subsystem for Linux.
  • Supported browsers: We develop and test mainly on desktop systems. Tested browsers include Chrome, Safari, Opera and Firefox. Some mobile testing is done on Android and iOS devices. Safari on iOS currently failing to load Qt applications with an "out of executable memory" error.
  • Supported Qt modules, in "make module-foo" form:
    • module-qtbase module-qtdeclarative module-qtquickcontrols2 module-qtwebsockets module-qtmqtt module-qtsvg module-qtcharts
    • These should build without error; other modules may work but have not been verified.
  • Debugging: Qt debug and logging output is printed on the JavaScript console, which can be accessed via browser "Developer Tools" or similar.
  • Due to disabled threading support in WebAssembly at the moment, the configure string above will build Qt with no threading support. Applications that relies on threading may not work.
  • Nested event loops are not supported. Applications should not call e.g. QDialog::exec() or create a new QEventLoop object.
  • Qt renders application content to a canvas element, and does not use (other) native DOM elements. This means accessibility (screen readers) are not supported and that text inputs won't trigger virtual keyboards.
  • WebGL is required, even for applications which do not use OpenGL themselves. All relevant browsers support WebGL, but note that some browsers blacklist certain older GPUs. The Qt loader will detect this and display an error message.
  • Applications do not have access to system fonts. Font files must be distributed with the application, for example in Qt resources. Qt for WebAssembly itself embeds one such font.
  • High-DPI and scaling: High-DPI rendering is supported, and so is setting the overall UI visual size using the browser zoom feature. Browser font size (and type) settings have no effect on Qt applications.
  • Network access: The web sandbox limits network access to a subset of what is available for native apps.
    • QNetworkAccessManager http requests to the web page origin server, or to a server which supports CORS.
    • QWebScoket connections to any host.
    • TCP and UDP socked tunneling using over WebSockets using a websockify server [implemented by Emscripten, not tested]
  • Clipboard support: The application clipboard is currently not integrated with the system clipboard.
  • On macOS, there may be artifacts of uninitialized graphics memory on some Qt Quick Controls 2 components, such as checkboxes.

Expected footprint (download size): Wasm modules as produced by the compiler can be large, but compress well.

Example gzip brotli
helloglwindow (QtCore + QtGui) 2.8M 2.1M
wiggly widget (QtCore + QtGui + QtWidgets) 4.3M 3.2M
SensorTag (QtCore + QtGui + QtWidgets + QtQuick + QtCharts) 8.6M 6.3M

Compression is typically handled on the web server side, using standard compression features: the server compresses automatically or picks up pre-compressed versions of the files. There's generally no need to have special handling of wasm files.