我们在 Windows 应用内嵌入 Edge WebView2,来展示部分用网页实现的界面。总得来说还是不错的,比如:
- 渲染很快,基本上内置网页100毫秒以内
- 控件样式很清爽,没有多余界面
- 开发需要调用的 API 也不多
但是最近在某个用户那边出现了问题,整个界面都是空白的,没有内容,导致应用无法使用了。
下面整理了一下问题排查的步骤及思路
确认安装 Edge 运行时
首先怀疑用户那边安装 Edge 运行时失败了,之前内部也遇到过。所有让用户从官网下载安装。
WebView2 - Microsoft Edge Developer
用户安装一切正常,启动应用现象如故。
怀疑与其他应用冲突
之前我们调试时,如果打开两个进程,一个是 Debug 版本的、一个是 Release 版本的,就会有一个 Web 不能正常显示。
所有让用户看看有没有其他的 WebView2 进程。从任务管理器里面查看,应该有这些进程。
用户恢复没有。
后来我们也进一步确认,应用间冲突是不存在的。应该只有使用同一个浏览器 cache 目录的应用,启动 WebView 的参数不同会冲突。
怀疑内置Web页面损坏
有没有可能应用安装时没有安装成功Web页面资源,或者内置的Web页面资源有问题?所有让用户帮忙直接用其他浏览器打开内置 file URL。
file:C:/Program%20Files/Bambu%20Studio/resources/web/homepage/index.html?lang=en_GB
用户回复可以打开,除了点击无动作,其他都正常。
加日志排查
将 WebView2 加载相关的事件回调,都加上日志,看看那一步失败了。
重新构建了一个临时调试版本, 发给用户运行。正常应该有这些回调。
2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnDocumentLoaded:
2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnTitleChanged: homepage
2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnNavigationComplete:
2022-11-30 04:21:09.619870[Thread 0x00002dd0]:WebViewPanel::OnScriptMessage:
从用户那儿收集的日志,显示一切正常,甚至 script 回调都有,也说明网页里面的 JavaScript 代码已经执行了。
既然 JavaScript 都执行了,那网页应该正常加载了啊。怎么就没有图像呢?
网上寻找帮助资料
通过上面的排查,怀疑是页面渲染的问题,或者是发生了透明、不可见的情况。用这些关键字去搜索,找到一些资料:
WebView2 windows are blank when created in the background
比如这里说,父窗口一开始不可见,后面即使可见了,Web 是空白的,但是好像是 .NET 库里面的问题,与 C++ 没有关系。
查看 WebView 窗口状态
从外围排查,应该是没有线索了,只能从应用自身的状态排查,看看有没有异常了。
用 Spy++ 可以查看窗口句柄,窗口的样式(是否可见)、尺寸等。
Spy++ 依赖 VS 运行时,都一起打包发给用户,教他怎么使用。
一顿操作,用户很配合,给了我们下面的信息:
分析下来,还是正常,所有属性都是正常的。与正常情况下也都一样。
简单 Demo 对比
有没有头绪了。也许是我们的应用太复杂了,那我搞一个最简单的只包含 WebView 集成的小程序。对比一下看看。
刚好 WebView 有自己的 Sample 项目,下载下来编译后,发给用户试试。
太好了,用户内部的 Demo 也不能显示网页内容。那就不是我们应用的问题了,只可能是用户环境都什么特殊的,导致 WebView 不能渲染。
继续网上搜索相关问题的资料
还是怀疑渲染问题,继续搜索
WebView2 is rendering the page but the content is displayed all transparent · Issue #1118 · MicrosoftEdge/WebView2Feedback · GitHub
这里面提到 chrome 内核对于各种 GPU 的兼容性,可能导致 chrome 的渲染不工作。
设置环境变量 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 为 --disable-gpu-driver-bug-workarounds --ignore-gpu-blocklist 可以让 chrome 内核忽略不兼容问题。
再去教用户怎么设置环境变量。
一番操作下来,Demo 可以展示 Web 页面了!!
确认解决问题
等等,还不能马上庆祝,因为还不知道我们的应用能不能展示 Web 页面,能不能正常工作呢。
终于等来了最终结论:
按我们客服的说法:
“感动到落泪”
“直接明目张胆的要好评,真的是被他折腾到”