Microsoft Edge WebView2

Windows

INTLWebView (TBS WebView) Deprecation Notice

INTLWebView (TBS WebView) has been gradually deprecated due to frequent problems encountered during business integration and is not recommended for continued game integration.It is recommended that new and existing games migrate to INTLWebView2 for better stability and user experience.

Microsoft Edge WebView2 is a technology introduced by Microsoft that allows developers to embed web content (including HTML, CSS, and JavaScript) into native applications.The essence of this technology is a control that developers can use to display web content within local applications, thereby providing end users with a richer and more dynamic application experience.

Specifically, WebView2 provides a runtime environment based on the core functionalities of the Microsoft Edge browser, enabling developers to harness the power of modern web platforms without having to leave their application interface.This means that users can access and manage web content within a unified interface while maintaining interactivity and integration with native applications.

Player Network SDK recommends using INTLWebView2 for better stability and more extensive functionality support.

For more details, see Microsoft Edge WebView2

Use WebView2

Player Network SDK supports WebView2 starting from version V1.23.00.To use the relevant features, you can select INTLWebView2 when downloading the Player Network SDK, download the corresponding plugins, and enable the relevant configuration in the INTLConfig.ini file:

[WebView]
INTL_WEBVIEW2_ENABLE=1

Distinction between INTLWebView and INTLWebView2

INTLWebView and INTLWebView2 can be switched through the configuration toggle in INTLConfig.ini, and both use the same interfaces in Unity and Unreal Engine.

The main differences between the two lie in the UserAgent and the interfaces for web and game communication using JavaScript, as illustrated in the table below:

	INTLWebView	INTLWebView2	Notes
UserAgent	INTLBrowser/1.23.999.529 (Windows; 11)	Microsoft-WebView2 INTLBrowser/1.23.999.529 (Windows; 11)	INTLWebView2 contains the Microsoft-WebView2 wording
JavaScript Communication Interface	window.tbs_external.nativeCall	window.chrome.webview.postMessage	Method for JavaScript to send messages to the game

Example of web communication with the game via JavaScript

• When opening a webpage in Windows WebView, distinguish between INTLWebView and INTLWebView2 via UserAgent
• Based on the UserAgent distinction, call the corresponding interface to send messages to the game's interface; INTLWebView uses window.tbs_external.nativeCall (accepts 2 parameters) while INTLWebView2 uses window.chrome.webview.postMessage (accepts 1 parameter)
• The second parameter of window.tbs_external.nativeCall and the first parameter of window.chrome.webview.postMessage are both data sent to the client (replaced with data below), in JSON format
• The data (JSON format) contains key-value pairs with INTLMethod as the key, used to indicate operations required by the client
• The first parameter of window.tbs_external.nativeCall is consistent with the value corresponding to the key INTLMethod in the data (JSON format)

Below is an example of JavaScript for the web:

<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){
            // Using INTLWebView2
            window.chrome.webview.postMessage(data);
        } else {
            // Using 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 examples, please see INTLWebViewSample.html.

Retrieve GuestId on the web side

INTLWebView

Web page sends request and receives GuestId:

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

INTLWebView2

• Web page sends request:

<script>
window.chrome.webview.postMessage('{"INTLMethod":"getGuestId"}');
</script>

• Web page receives 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 examples, please see INTLWebViewSample.html.

INTLWebView2 System Requirements

Supports the following programming environments:

• Win32 C/C++
• .NET Framework 4.6.2 or higher
• .NET Core 3.1 or higher
• .NET 5 or higher
• WinUI 2.0
• WinUI 3.0

WebView2 applications 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, please see Supported Platforms.

Determine if the user's PC already has the WebView2 runtime installed

Because INTLWebView2 relies on Microsoft WebView2, when distributing games using INTLWebView2, it is necessary to ensure that the user's PC already has the WebView2 runtime installed:

Method 1: Check the registry

If the user's PC has WebView2 runtime installed, at least one location in the two registry locations listed below should have the key pv (REG_SZ) and the value must be greater than 0.0.0.0.If neither location has the key pv (REG_SZ), or only one location has pv (REG_SZ) but its value is null, an empty string, or 0.0.0.0, it indicates that the client does not have the WebView2 runtime installed, and you can check pv (REG_SZ) to detect if the WebView2 runtime is installed and obtain the version.

Two registry locations to check under 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 through code

The following interface returns the version information of WebView2 runtime or the Microsoft Edge preview versions (Beta, Dev, Canary) and can be used to determine if the user's PC already has the WebView2 runtime environment.For details regarding GetAvailableCoreWebView2BrowserVersionString, please see Getting Started with WebView2 in Win32 Applications

#include<WebView2.h>

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

For more details, please see Detect if a Suitable WebView2 Runtime is Already Installed.

WebView2 Runtime Deployment

note

The following content is quoted from the official Microsoft Edge WebView2 site. To learn more about WebView2 runtime deployment, please see Distribute Apps and the WebView2 Runtime.

If the business chooses to adopt the WebView2 solution, the game package installation process may require assisting or guiding users to install the WebView2 runtime environment to ensure that WebView2 mode scenarios work correctly.Distribute and update the WebView2 runtime in the following two ways:

Method 1: Evergreen Runtime Distribution Mode

In the Evergreen Runtime Distribution Mode, the WebView2 runtime is not packaged with the application but is installed on the client using an online installer or an offline installer. The WebView2 runtime will automatically update on the client machine, the game does not need to manually update the WebView2 runtime, and Microsoft officially recommends using the Evergreen distribution mode.

Method 2: Fixed Version Runtime Distribution Mode

In the Fixed Version Runtime Distribution Mode, download a specific version of the WebView2 runtime and package it with the WebView2 application into the app package. The WebView2 runtime packaged with the application is only used by the WebView2 application and cannot be used by any other applications on the client computer.

For more details, Download the WebView2 Runtime.