跳到主要内容

Microsoft Edge WebView2

Windows

Microsoft Edge WebView2 是微软推出的一项技术，它允许开发者将网页内容（包括 HTML、CSS 和 JavaScript）嵌入到本机应用程序中。这项技术的实质是一个控件，开发者可以利用它在本地应用内展示网页内容，从而为最终用户提供更加丰富和动态的应用体验。

具体来说，WebView2 提供了一个运行时环境，这个环境基于 Microsoft Edge 浏览器的核心功能，使得开发者能够利用现代网络平台的强大能力，而无需离开他们的应用程序界面。这意味着用户可以在一个统一的界面中访问和处理网页内容，同时保持与原生应用的交互性和集成度。

详情可以参考 Microsoft Edge WebView2

使用 WebView2​

Player Network SDK 从 V1.23.00 版本开始支持 WebView2。若要使用相关功能，可以在下载 Player Network SDK 的时候，勾选 INTLWebView2，下载相应的插件，同时在 INTLConfig.ini 文件中打开相关配置：

[WebView]
INTL_WEBVIEW2_ENABLE=1

INTLWebView 和 INTLWebView2 的区别​

INTLWebView 和 INTLWebView2 通过 INTLConfig.ini 配置的开关进行切换，两者在 Unity 和 Unreal Engine 使用的接口是一致的。

两者的主要区别在于 UserAgent 和网页与游戏使用 JavaScript 进行通信的接口，如下表所示：

INTLWebViewINTLWebView2备注
UserAgentINTLBrowser/1.23.999.529 (Windows; 11)Microsoft-WebView2 INTLBrowser/1.23.999.529 (Windows; 11)INTLWebView2 带有 Microsoft-WebView2 字样
JavaScript 通信接口window.tbs_external.nativeCallwindow.chrome.webview.postMessageJavaScript 发送信息给游戏的方式

网页通过 JavaScript 与游戏进行通信的示例​

  • 在 Windows 的 WebView 打开网页的时候，通过 UserAgent 区分 INTLWebView 和 INTLWebView2
  • 根据 UserAgent 区分的结果调用对应的接口发送信息至游戏的接口，INTLWebView 使用 window.tbs_external.nativeCall（接受2个参数）而 INTLWebView2 使用 window.chrome.webview.postMessage（接受一个参数）
  • window.tbs_external.nativeCall 的第二个参数与 window.chrome.webview.postMessage 的第一个参数，都是发送给客户端的数据（下面以 data 代替），为 JSON 格式
  • data（JSON 格式）中含有以 INTLMethod 为键的键值对，用以表示需要客户端进行的操作
  • window.tbs_external.nativeCall 的第一个参数与 data（JSON 格式）中的键为 INTLMethod 对应的值一致

以下是网页 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){
            //使用的是 INTLWebView2
            window.chrome.webview.postMessage(data);
        } else {
            //使用的是 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)" />

更多示例，请参见 INTLWebViewSample.html。

网页端获取 GuestId​

INTLWebView​

网页发送请求和接收 GuestId:

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

INTLWebView2​

  • 网页发送请求:
<script>
window.chrome.webview.postMessage('{"INTLMethod":"getGuestId"}');
</script>
  • 网页接收 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>

更多示例，请参见 INTLWebViewSample.html。

INTLWebView2 系统要求​

支持以下编程环境： Win32 C/C++ .NET Framework 4.6.2 或更高版本 .NET Core 3.1 或更高版本 .NET 5 或更高版本 WinUI 2.0 WinUI 3.0

WebView2 应用可以在以下版本的 Windows 上运行： Windows 11 Windows 10 Windows 10 IoT 企业版 LTSC x32 2019 Windows 10 IoT 企业版 LTSC x64 2019 Windows 10 IoT 企业版 21h1 x64 Windows Server 2022 Windows Server 2019 Windows Server 2016

更多详情，请参见 受支持的平台。

判断用户 PC 上是否已存在 WebView2 运行时​

由于 INTLWebView 依赖 Microsoft WebView2，用 INTLWebView 发行游戏的时候需确保用户 PC 上是否已存在 WebView2 运行时：

方法1：检查注册表。​

若用户电脑上安装了 WebView2 运行时，则在下面列举的两个注册表位置中，至少有一个位置存在键 pv (REG_SZ)，并且值必须大于 0.0.0.0。如果这两个位置下都不存在键 pv (REG_SZ)，或者只有一个位置存在 pv (REG_SZ)，但其值为 null、空字符串或 0.0.0.0，则表示客户端上未安装 WebView2 运行时，可以通过检查 pv (REG_SZ) 以检测是否已安装 WebView2 运行时，并获取 WebView2 运行时的版本。

在 64-位 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}

方法2：通过代码判断​

以下接口返回 WebView2 运行时或 Microsoft Edge 预览版（Beta、Dev、Canary）的版本信息，可用来判断用户 PC 上是否已存在 WebView2 运行环境。有关 GetAvailableCoreWebView2BrowserVersionString 的详情请参见 Win32 应用中的 WebView2 入门


#include<WebView2.h>

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

详情请参见 检测是否已安装合适的 WebView2 运行时。

WebView2 运行时部署​

注意

以下内容引用自 Microsoft Edge WebView2 官网，要了解更多关于 WebView2 运行时部署的信息，请参见 分发应用和 WebView2 运行时。

如果业务选择接入 WebView2 的方案，游戏包安装过程中需要帮助或引导用户安装 WebView2 运行时环境，以保证 WebView2 模式场景工作正常。根据下列两种方式分发并更新 WebView2 运行时：

方法1：Evergreen Runtime 分发模式​

在 Evergreen Runtime 分发模式 下，WebView2 运行时不随应用一起打包，而是使用联机引导程序或脱机安装程序安装到客户端上。 WebView2 运行时会自动在客户端计算机上更新，游戏无需手动更新WebView2运行时，Microsoft官方建议使用 Evergreen 分发模式。

方法2：固定版本运行时分发模式​

在 固定版本运行时分发模式 下，下载特定版本的 WebView2 运行时，并将其与 WebView2 应用一起打包到应用包中。 随应用一起打包的 WebView2 运行时仅由 WebView2 应用使用，而不能由客户端计算机上的任何其他应用使用。

更多详情，下载 WebView2 运行时。

最后于 更新