Part 01
WebView2简介
我们都知道,对于桌面应用开发来说,人们常用的方式就是采用c++或者c#、java等进行开发,然而这些语言开发效率不够高,不如网页开发灵活。于是,人们就提出了混合开发的模式,思考采用html+css+js的方式来开发桌面客户端。而WebView2是微软推出的一组控件,Microsoft Edge WebView2控件允许在本机应用中嵌入web技术(HTML、CSS以及JavaScript)。WebView2控件使用Microsoft Edge作为绘制引擎,以在本机应用中显示web内容。使用WebView2可以在本机应用的不同部分嵌入Web代码,或在单个WebView2实例中生成所有本机应用。
Part 02
WebView2的由来
之所以称之为 WebView2,是因为它取代了WebView控件。而 WebView又取代了老旧的WebBrowser控件。WebView使用原始的Edge (Trident) 渲染引擎,是Windows10唯一的控件。WebView2使用较新的Edge渲染引擎,并支持多种Windows平台
Part 03
WebView2的优点
- 丰富的Web生态系统和技能级。因为采用Web技术,因此丰富的Web框架和库都可以拿来直接使用。
- 迭代和更新变得异常方便。
- 本级功能。提供了全套访问本地的功能API。
- 代码共享。多个平台的代码可以复用,一套代码多个平台。
- 微软官方支持开发和维护。当WebView2发布一般可用版 (GA) 时,Microsoft会提供支持并添加新功能请求。
- 多个版本控制,可以选用不同的chromium进行打包。
- 支持多Windows平台。支持跨Windows7、Windows8、Windows10和Windows11,实现一致的用户体验。
Part 04
WebView2的安装方式
WebView2是依赖于Edge chromium内核的,有如下三种方式可以获取:
1.安装开发版的Edge (Chromium),稳定版的Edge目前不支持WebView控件,尚不确定后续是否会开放。
2.安装独立的WebView2 Runtime,它可以独立下载和升级。
3.嵌入Edge chromium内核。
这三种方式运行效果基本一致,主要特点是:
前两种方式和以前使用IE的浏览器控件非常类似,浏览器内核和程序是分离的,程序可以保持非常小的体积,浏览器内核可以单独升级。
第一种方式目前还不支持Edge的稳定版,无法使用于生产环境。
第二种方式和以前的CEF比较类似,将chromium嵌入了程序,可以控制chromium的版本,减少依赖性,同时可以控制浏览器的版本,避免升级导致的不稳定。
第三种方式相对麻烦些,我使用的是第二种方式,安装完了后,可以在程序列表中看到WebView2 runtime。
Part 05
WebView2的应用
中国移动数字乡村PC客户端是一款基于WebView2的应用程序,之前使用Miniblink框架由单人独立开发,存在以下缺点:
1.单人维护,目前不再开发新需求;
2.不支持X64版本;
3.无法播放音视频流;
4.加载3D场景过慢,例如电子地图。
为此我们基于 WebView2进行了优化改造,其流程模型如下:
应用加载流程URL流程如下:
WebView2是一个建立在Chromium Edge之上的Web控件,它允许应用程序访问最新的Web技术,能为用户提供更好的Web体验和性能。目前中国移动数字乡村PC端应用已稳定上线,能快速加载渲染地图,播放视频,为中国移动数字乡村提供了良好的用户体验。
如下图为WebView2在中国移动数字乡村PC端的应用。