WebView2-iaspnetcore.com

The Microsoft Edge WebView2 control allows embedded Web technologies (HTML, CSS, and JavaScript) in native apps. The WebView2 control uses Microsoft Edge (Chromium) as the rendering engine to display the Web content in native apps.

Table of Content

Webview2 How can I get html source code?

Manage webview2 the user data folder

下面几种控件在本机应用程序中显示 web 内容。 你可以将 控件代码嵌入本机应用程序。

WebBrowser使用IE7内核---The original WebView control is now obsolete and longer supported.
CefSharp是WebBrowser的替代方案。使用Chrome内核。

Microsoft Edge WebView2 是WebBrowser的替代方案。使用Chromium内核。

1.Microsoft has deprecated its Internet Explorer browser and replaced it as default browser on Windows 10 with Edge。

2.the new version of Microsoft Edge is based on the Chromium project。

3.Note that the WebView2 is a very different control than the original WebView control, which existed briefly and was based on the classic Edge engine. The original WebView control is now obsolete and longer supported.

WebView2 supports the following programming environments:

Win32 C/C++ (GA)
.NET Framework 4.6.2 or later
.NET Core 3.1 or later
.NET 5
WinUI 3.0 (Preview)

Prerequisites

Microsoft Edge (Chromium) installed on supported OS (currently Windows 10, Windows 8.1, and Windows 7)

vs 2019

step 1：准备WebView2开发环境

WebView2 control uses Microsoft Edge (Chromium)
由于WebView2使用的是Edge的Chromium内核，所以必须有Chrome内核环境，有如下三种方式可以获取：

1.安装开发版的Edge (Chromium)，稳定版的Edge目前不支持WebView2控件。
2.安装独立的WebView2 Runtime，它可以独立下载和升级 嵌入Edge chromium内核
3. 嵌入Edge chromium内核

webview2 Runtime Official Download url：
https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

如何选择：

这三种方式运行效果基本一致，主要特点是：

前两种方式和以前使用IE的浏览器控件非常类似，浏览器内核和程序是分离的，程序可以保持非常小的体积，浏览器内核可以单独升级。
第一种方式目前还不支持Edge的稳定版，无法使用于生产环境
第三种方式和以前的CEF比较类似，将chromium嵌入了程序，可以控制chromium的版本，减少依赖性，同时可以控制浏览器的版本，避免升级导致的不稳定

1.Using Edge and the WebView2 control

If you are working on existing Windows native applications that display web content or want to create new ones, Using Edge and the WebView2 control is a natural choice because:

Edge it is the default browser for the platform.
WebView2 is the control that Microsoft is building for using Edge.
If you have the Windows automatic updates enabled (and you should) the browser is automatically updated so you do not have to trouble with keeping up with security updates.
The minimum version of the Edge browser that works is 82.0.488.0。You can check the version of the browser if you go the Edge menu > Help and feedback > About Microsoft Edge.

You can also use preview builds of the Microsoft Edge browser by using one of its insider channels:

Beta channel – major stable updates every 6 weeks
Dev channel – weekly updates that have been previously tested by the Edge team
Canary channel – updated daily

For development purposes, you can use any Insider (non-stable) Microsoft Edge (Chromium) browser channel. The WebView2 control is not available in the stable Edge。

WebView2基于本地的浏览器内核引擎来渲染网页的。所以这种方式使用WebView2就必然需要本地安装Microsoft Edge Chromium版本。

2.WebView2 Runtime

If you build apps that use the WebView2 component you need to distribute it with your application. The best way to do so is using the Edge WebView2 evergreen runtime. The runtime is a modified version of the Chromium-based Edge intended and tested for apps. Only one installation of the runtime is needed for all apps on the device.

The reason for preferring to target the runtime include the following:

Does not depend on the Edge browser being installed on the machine, or a particular version of it.
Updates automatically without additional effort from you.
It is available to target Win32, WPF, WinForms, and WinUI3 applications (the latter in preview stage).
In the future, it will be shipped with Windows.

for production, you must use the WebView2 runtime.

WebView2Loader.dll is a dynamic library wraps around WebView2 Runtime and allows Delphi applications to make use of its functionality.

WebView2 Runtime is a standalone runtime package that allows applications to use WebView2 environment without Microsoft Edge being installed on the target computer.

WebView2 Runtime can be distributed in two modes.

Evergreen mode installs the WebView2 package as a system component similar to C++ Runtime packages. It is installed once and can then be used from any application. It is also capable of updating itself.
In Fixed version mode you distribute the needed binaries with your application. Such binaries are generally available just to your application. And if multiple applications are installed each ship with their own binaries so it uses more disk space.

step 2：Create a single window win32 app

Install-Package Microsoft.Web.WebView2

Webview2 How can I get html source code?

Private Sub testbtn_Click(sender As Object, e As EventArgs) Handles testbtn.Click
        WebView2.CoreWebView2.Navigate("https://www.microsoft.com/")
End Sub

Private Sub WebView2_NavigationCompleted(sender As Object, e As CoreWebView2NavigationCompletedEventArgs) Handles WebView2.NavigationCompleted
        Dim html As String = ?????
End Sub

1
EdgeBrowser1.NavigateToString('<html><body><h1>Hello From Delphi</h1></body></html>');

Dim html As String
html = Await WebView2.ExecuteScriptAsync("document.documentElement.outerHTML;")

' The Html comes back with unicode character codes, other escaped characters, and
' wrapped in double quotes, so I'm using this code to clean it up for what I'm doing.
html = Regex.Unescape(html)
html = html.Remove(0, 1)
html = html.Remove(html.Length - 1, 1)

 Private Sub testbtn_Click() 
Handles testbtn.Click 
wv.CoreWebView2.Navigate(""microsoft.com/"") 
End Sub 

Private Async Sub wv_NavigationCompleted() 
Handles wv.NavigationCompleted 
Dim html As String = String.Empty
 html = Await wv.ExecuteScriptAsync("document.documentElement.outerHTML;") 
html = Regex.Unescape(html) 
html = html.Remove(0, 1) 
html = html.Remove(html.Length - 1, 1)
 End Sub

EdgeBrowser1.ExecuteScript('alert("hello Delphi!");')

Manage webview2 the user data folder

Using WebView2 as a Service,This application must be:

Connect an url
Elaborate url javascripts, css, etc..
Interact with the application
Produce a result
Go down

https://github.com/MicrosoftEdge/WebView2Feedback/issues/202

Useful links

https://docs.microsoft.com/en-us/microsoft-edge/webview2/

Get started with WebView2 in Win32 apps（c++）

https://docs.microsoft.com/en-us/microsoft-edge/webview2/get-started/win32

https://docs.microsoft.com/zh-cn/microsoft-edge/webview2/get-started/winforms

https://github.com/MicrosoftEdge/WebView2Samples

Taking the new Chromium WebView2 Control for a Spin in .NET - Part 1

https://weblog.west-wind.com/posts/2021/Jan/14/Taking-the-new-Chromium-WebView2-Control-for-a-Spin-in-NET-Part-1