We're experimenting with a new way to export to Windows with a lightweight wrapper based on the Microsoft Edge WebView2 control. Similar to Cordova, it's basically a system webview that runs your project, but using a Windows system webview.
Try it out
This is now built in to Construct 3 r237+. Choose the "Windows wrapper (WebView2)" export option.
What is Microsoft Edge WebView2?
Microsoft Edge WebView2 is a Windows system WebView based on the modern Microsoft Edge, which is now based on the Chromium browser engine (the same one Google Chrome uses). This means native Windows apps can display web content using the WebView2 control. This experimental wrapper just creates a window with a WebView2 in it, and loads your project in it. You can think of it as working similarly to Cordova, which loads your project in a system webview. This allows for very lightweight exports, as your project is basically a standard HTML5 export, with a small wrapper app to load it.
This wrapper is built with the philosophy that it should do as little as possible. Ideally WebView2 will do everything. If it cannot, or some feature needs a bit of extra code, then the goal is to use built-in features of Windows instead. This avoids bloating the wrapper app with libraries, frameworks and other code, since much of what Construct games need is already built in to Windows.
Having said that, the points of interest are:
- Uses a fully-featured modern Chromium-based browser engine - i.e. it can do everything that also works in Microsoft Edge/Google Chrome
- Tiny overhead (wrapper app is about 250kb compressed)
- Should work on Windows 7 and newer (note it's currently only been tested on Windows 10 - we're keen to hear from you how it works with earlier Windows versions)
- Supports DevTools - like in a browser, press F12 to open them
- Automatically approves permissions without prompting, e.g. camera
- Most features that require a user input event in browsers work unrestricted, e.g. starting audio playback immediately (but note requesting fullscreen seems inconsistent - see report)
- WebView2 automatically updates, so you don't need to distribute updates just to update the browser engine
- Links open in the default system browser
- Browser 'Close' action can exit the app
- Invoking downloads works, since it supports the download UI
- YouTube videos can play, since it supports full proprietary media codecs the same way Microsoft Edge does
One caveat is that for it to work the system must have the WebView2 runtime installed, and not all systems have it pre-installed. However this could change as Microsoft's documentation states:
In the future, the Evergreen WebView2 Runtime plans to ship with future releases of Windows.
So in future it may be reliably built-in to Windows. In the mean time the wrapper app is capable of identifying if the WebView2 runtime is not installed, downloading the WebView2 runtime installer, running it, and then continuing to execute the app. So assuming the user is online and has permission to run the installer, it should be a fairly smooth and reliable way to automatically self-install the runtime. This only needs to be done once per system, and then it's available to all apps and auto-updates itself.
Comparison to NW.js
NW.js differs in a few key ways. Overall it can be characterised as a more heavyweight but also more feature-complete export option for Windows (at this time, anyway). Here are some of the key differences:
- With NW.js, you distribute a complete copy of the Chromium browser engine and the Node.js runtime, with your project. The WebView2 wrapper does not include either, relying on the system webview (and if necessary installing it for the user on startup). This makes the exported file size far smaller - an empty win64 NW.js export is around 80-90mb compressed, whereas WebView2 is about 250kb compressed.
- WebView2 auto-updates. With NW.js the app never updates the browser engine, unless you re-export with an updated version and publish that.
- For similar reasons, Steam integration with Greenworks is not supported in WebView2.
- WebView2 probably uses less memory, especially when using multiple apps, since they share a common browser engine instead of each using their own unique copy of a browser engine.
The provided download is not yet production-ready - there are several more key details to sort out before then, such as providing a configuration file. If this experiment proves successful, there are several options we could explore:
- Polish: finish some remaining features like a configuration file similar to NW.js's package.json; identify bugs and missing features and resolve them
- Support for Windows 32-bit and Windows ARM64
- Integrate with Construct 3 so you can directly export to WebView2 from the editor, similar to NW.js
- Supporting things like file system access in WebView2, perhaps with some new plugins
- Potential Steam integration with the official Steamworks SDK
- Potential development of a macOS equivalent wrapper, since macOS has a built-in system webview (WKWebView)
Please note as highlighted above, we cannot guarantee any of this will happen at this stage. This is just illustrating what ought to be possible.
We're keen to hear your feedback on this. Try out the download above and see if it works for your project. Here are some questions we'd be interested to hear your answers to:
- Does it work well?
- Are there any bugs or important missing features?
- Does it work on Windows 7 and Windows 8?
- Would you consider exporting real projects with this? What kinds of situations would you use it for?
- Would you consider using this instead of NW.js? If not why not?
- Do you think this should be something we focus on?
Let us know your thoughts by replying to this thread! We won't accept bugs for this on the main issue tracker yet as it's still experimental - just let us know about any issues here (but as always if you can provide the same information as the bug report guidelines, we'll be much more likely to be able to help). But please do share your thoughts and feedback!