Let’s talk about what is WebView2?

Part 01

Introduction to WebView2

We all know that for desktop application development, the common way people use is to develop in C++, C#, Java, etc. However, the development efficiency of these languages ​​is not high enough and is not as flexible as web development. Therefore, people have proposed a hybrid development model, thinking about using html+css+js to develop desktop clients. WebView2 is a set of controls launched by Microsoft. The Microsoft Edge WebView2 control allows web technologies (HTML, CSS, and JavaScript) to be embedded in native applications. The WebView2 control uses Microsoft Edge as the drawing engine to display web content in native applications. Using WebView2, you can embed web code in different parts of native applications, or generate all native applications in a single WebView2 instance.

Part 02

The origin of WebView2  

It is called WebView2 because it replaces the WebView control. WebView in turn replaces the old WebBrowser control. WebView uses the original Edge (Trident) rendering engine and is the only control for Windows 10. WebView2 uses the newer Edge rendering engine and supports multiple Windows platforms.

Part 03

  Advantages of WebView2  

- Rich Web ecosystem and skill level. Because it uses Web technology, a variety of Web frameworks and libraries can be used directly.

- Iteration and updating become extremely convenient.

- This level of functionality provides a full set of APIs for accessing local functions.

- Code sharing. Codes for multiple platforms can be reused, with one set of code for multiple platforms.

- Microsoft officially supports development and maintenance. When WebView2 is released to general availability (GA), Microsoft will provide support and add new feature requests.

- Multiple version control, you can choose different chromium for packaging.

- Supports multiple Windows platforms. Supports Windows 7, Windows 8, Windows 10 and Windows 11 to achieve a consistent user experience.

Part 04

How to install WebView2  

WebView2 depends on the Edge chromium kernel, and there are three ways to obtain it:

1. Install the development version of Edge (Chromium). The stable version of Edge currently does not support the WebView control, and it is not yet certain whether it will be opened in the future.

2. Install the independent WebView2 Runtime, which can be downloaded and upgraded independently.

3.Embedded Edge chromium kernel.

The operating effects of these three methods are basically the same, and the main features are:

The first two methods are very similar to the browser controls used in IE before. The browser kernel and the program are separated, the program can be kept very small, and the browser kernel can be upgraded separately.

The first method currently does not support the stable version of Edge and cannot be used in a production environment.

The second method is similar to the previous CEF. It embeds Chromium into the program, which can control the version of Chromium and reduce dependencies. It can also control the version of the browser to avoid instability caused by upgrades.

The third method is relatively troublesome. I used the second method. After installation, you can see WebView2 runtime in the program list.

Part 05

Application of WebView2  

China Mobile Digital Village PC Client is an application based on WebView2. It was previously developed independently by one person using the Miniblink framework and has the following disadvantages:

1. Single-person maintenance, no new requirements are currently being developed;

2. Does not support X64 version;

3. Unable to play audio and video streams;

4. Loading 3D scenes, such as electronic maps, is too slow.

To this end, we have optimized and transformed it based on WebView2, and its process model is as follows:

The URL flow of the application loading process is as follows:

WebView2 is a web control built on Chromium Edge, which allows applications to access the latest web technologies and provide users with better web experience and performance. Currently, the China Mobile Digital Village PC application has been stably launched, which can quickly load and render maps and play videos, providing a good user experience for China Mobile Digital Village.

The following figure shows the application of WebView2 on the PC side of China Mobile Digital Village.