跳到主要内容

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 运行时。

最后于 更新