Skip to main content

Microsoft Edge WebView2

Windows

The Microsoft Edge WebView2 control allows you to embed web technologies (HTML, CSS, and JavaScript) in your native apps. The WebView2 control uses Microsoft Edge as the rendering engine to display the web content in native apps.

With WebView2, you can embed web code in different parts of your native app, or build all of the native app within a single WebView2 instance.

For more details, see Microsoft Edge WebView2.

Incorporate WebView2 to your game​

WebView2 has been made available in Player Network SDK since V1.23.00. To use the features of WebView2, select INTLWebView2 while downloading Player Network SDK to download the corresponding plugins, then add the configuration below to INTLConfig.ini:

[WebView]
INTL_WEBVIEW2_ENABLE=1

Differences between INTLWebView and INTLWebView2​

INTLWebView and INTLWebView2 can be selected by configuring INTLConfig.ini, and both uses the same API in Unity and Unreal Engine.

The main differences between them lie in the UserAgent, as well as the JavaScript communication interface used by webpages and your game, as shown in the below table:

INTLWebViewINTLWebView2Remark
UserAgentINTLBrowser/1.23.999.529 (Windows; 11)Microsoft-WebView2 INTLBrowser/1.23.999.529 (Windows; 11)The string Microsoft-WebView2 can be found in INTLWebView2
JavaScript communication interfacewindow.tbs_external.nativeCallwindow.chrome.webview.postMessageHow JavaScript communicates with the game

How a webpage communicates with the game through JavaScript​

  • When using WebView to open a webpage on Windows, INTLWebView or INTLWebView2 is identified through the UserAgent
  • According to the results, the respective API is called to relay information to the game API, INTLWebView uses window.tbs_external.nativeCall (receives 2 parameters) while INTLWebView2 uses window.chrome.webview.postMessage (receives 1 parameter)
  • The second parameter of window.tbs_external.nativeCall and the first parameter of window.chrome.webview.postMessage are information data (referred to as data below) to be sent to the client, in JSON format
  • A key-value pair with INTLMethod as the key can be found in the data (JSON format), which represents the actions to be performed by the client
  • The first parameter of window.tbs_external.nativeCall corresponds to the key-value of the INTLMethod key in the data (JSON format)

Sample for web JavaScript:


<script>
function isWindowsPC(){
    var ua = navigator.userAgent;
    return SubStrSearch('Windows;', ua) != -1 && 
    SubStrSearch('INTLBrowser', ua) != -1;
}
    
function INTLCallNative(data) {
    if (isWindowsPC()) {
        var agent = navigator.userAgent;
        if (agent.indexOf("Microsoft-WebView2") >= 0
        && agent.indexOf("INTLBrowser/") >= 0){
            //Loading web page by INTLWebView2
            window.chrome.webview.postMessage(data);
        } else {
            //Loading web page by INTLWebView
            var obj = JSON.parse(data);
            window.tbs_external.nativeCall(obj['INTLMethod'], [data]);
    }
}
var SetFullScreen = '{"INTLMethod":"setFullScreen","isFullScreen":true}';
</script>

<input type="button" value="Set WebView full screen" onclick="INTLCallNative(SetFullScreen)" />

For more samples, see INTLWebViewSample.html.

Getting GuestId for webpages​

INTLWebView​

Webpage sending request and receiving GuestId:

<script>
window.tbs_external.nativeCallEx("getGuestId", ['{"INTLMethod":"getGuestId"}'], function (res) { alert(res); });
</script>

INTLWebView2​

  • Webpage sending request:
<script>
window.chrome.webview.postMessage('{"INTLMethod":"getGuestId"}');
</script>
  • Webpage receiving GuestId:

<script>
var agent = navigator.userAgent;
if (agent.indexOf("Microsoft-WebView2") >= 0
    && agent.indexOf(" INTLBrowser/") >= 0)  {
    window.chrome.webview.addEventListener('message', arg => {
        var obj = JSON.parse(arg.data);
        var method = obj['INTLMethod'];
        if ('getGuestId'.toLowerCase() == method.toLowerCase()){
            var guestID = obj['guestId'];
            alert(guestID);
        }
    });
}
</script>

For more samples, see INTLWebViewSample.html.

System requirements for INTLWebView2​

The following programming environments are supported: Win32 C/C++ .NET Framework 4.6.2 and later .NET Core 3.1 and later .NET 5 and later WinUI 2.0 WinUI 3.0

WebView2 apps can run on the following versions of Windows: Windows 11 Windows 10 Windows 10 IoT Enterprise LTSC x32 2019 Windows 10 IoT Enterprise LTSC x64 2019 Windows 10 IoT Enterprise 21h1 x64 Windows Server 2022 Windows Server 2019 Windows Server 2016

For more details, see Supported platforms.

Detect if WebView2 Runtime is present in the client machine​

As INTLWebView depends on Microsoft WebView2, ensure that the WebView2 Runtime is present in the client machine when distributing your game with INTLWebView2:

Method 1: Inspect the registry​

If WebView2 Runtime is installed in the client machine, the regkey pv (REG_SZ) will be present in one of the below locations, with a value greater than 0.0.0.0. If neither regkey exists, or if only one of these regkeys is present but its value is null, empty, or 0.0.0.0, WebView2 Runtime isn't installed on the client. Inspect pv (REG_SZ) to detect whether the WebView2 Runtime is installed, and to obtain the version of the WebView2 Runtime.

The two registry locations to inspect on 64-bit Windows:


HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}

HKEY_CURRENT_USER\Software\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}

Method 2: Determine based on code​

The below API returns version information for WebView2 Runtime, or for any installed preview channels of Microsoft Edge (Beta, Dev, or Canary), therefore is able to determine if WebView2 Runtime is present in the client machine. For more details about GetAvailableCoreWebView2BrowserVersionString, see Get started with WebView2 in Win32 apps.


#include<WebView2.h>

bool IsWebViewRuntimeAvailable() {
  LPWSTR version_info;
  auto result = GetAvailableCoreWebView2BrowserVersionString(nullptr, &version_info);
  return SUCCEEDED(result) && version_info != nullptr;
}

See Detect if a suitable WebView2 Runtime is already installed for more details.

Distribute WebView2 Runtime​

note

The below information has been referenced from the Microsoft Edge WebView2 official webpage. For more information regarding WebView2 Runtime distribution, see Distribute your app and the WebView2 Runtime.

If the project chooses to integrate WebView2, steps to guide the user to install WebView2 Runtime should be included with the game package install, to ensure WebView2 is able to run as intended. Two different ways are available for distributing and updating WebView2 Runtime:

Method 1: Evergreen Runtime distribution mode​

In the Evergreen Runtime distribution mode, the WebView2 Runtime isn't packaged with your app, but is initially installed onto clients using an online bootstrapper or an offline installer. Afterwards, the WebView2 Runtime is automatically updated on client machines. You can then distribute updates of your WebView2 app that use the latest WebView2 APIs, from the latest WebView2 SDK. The Evergreen distribution mode is recommended for most developers.

Method 2: Fixed Version runtime distribution mode​

In the Fixed Version runtime distribution mode, you download a specific version of the WebView2 Runtime and package it together with your WebView2 app in your app package. The WebView2 Runtime that you package with your app is used only by your WebView2 app, not by any other apps on the client's machine.

For more information, Download the WebView2 Runtime.

Last updated on