C# 使用 Edge Web.WebView2

WinForms 應用程式中使用 WebView2。可嵌入應用程序的瀏覽器控件 Windows 應用 SDK WebView2 公共 WebView2 可在 Windows 應用 SDK 中使用 EdgeWinUI 合作,將 WebView2 控件反向移植到 WinUI2 中。Windows UI 程式庫 (WinUI) 2Windows SDK 整合並使用 XAML Islands() 為 UWP 應用程式提供官方原生 Windows UI 控制項和其他使用者介面元素。

C# ASP.NET 應用 WebView2 程式

Visual Studio C# ASP.NET 的應用,替換應用程式 WebBrowser 改用 Microsoft Edge WebView2WinForms 應用程式中內嵌 Microsoft Edge (Chromium) 平台 Web 內容。永久啟動載入器,根據預設 WebView2 會「永久」並接收自動更新,以保持最新狀態且最安全的平台。這個「永久」看以後的網路變化吧。Internet Explorer 瀏覽器徹底淘汰日期在 2022/06/15 不再支援 IE 11 瀏覽器傳統型應用程式,並推薦移轉至 Microsoft Edge。原本於本機作業的 WebBrowser 亦可使用新的網路技術。

WebView2 Microsoft Edge

可以用於開發 Windows 桌面應用程序、新版的 Microsoft Edge 瀏覽器採用與 Google Chrome 同樣的 Chromium 核心,將 Web 技術 HTML、JavaScript、CSS 本機應用中,因此可以提供更好的網頁相容度,同時也提供久違的 macOS 版本。Chromium 核心自 2006 年即開始 Google 為發展 Google Chrome 瀏覽器而釋出的免費開源軟體專案,為了創建安全、穩定和快速的通用瀏覽器,以 BSD 授權條款等數種授權發行並開放原始碼。Chromium, Google Chrome 共享瀏覽器大部分程式碼和 JavaScriptECMAScript, ES6 語法支持功能。

Edge 在官方 Microsoft 安裝更新新版 Chromium 核心 Edge 的預設瀏覽器。通過設定可以調整,決定自己保護自己隱私安全的程度及設定預定搜尋引擎、以及擴充功能,在網頁設計考量時、應該就漸近的擺脫以前相容性的約束。



首先下載 WebView2 執行階段

Microsoft Edge WebView2 RuntimeWebView2 控件可以在由 Microsoft Edge (Chromium) 提供支持的本機應用程序中嵌入當前 Web 技術 HTML, CSS, ECMAScript, JavaScript 少了這個 Visual Studio 2017 就沒有辦法顯示指定的 Source 網址內容。

https://developer.microsoft.com/zh-TW/microsoft-edge/webview2/

MicrosoftEdgeWebview2Setup.exe



Visual Studio 編輯、建置及偵錯程式碼

Microsoft Edge WebView2 基於微軟新版本的 Chromium 核心 Edge 瀏覽器的一部分不斷進行諸多最佳化。該瀏覽器控制項首次預裝在 Windows 10 版本 20H2 中。原本於本機作業的 C# Windows Forms 更新。
Visual Studio 選單中的 Tools 工具(T)、NuGet 封裝管理員、管理方案的 NuGet 套件。

Microsoft.Web.WebView2

設置開發工具並為 WinForms 平台創建初始化 WebView2 應用程序。元件開發應用,需要安裝 Microsoft Visual Studio 版本 Visual Studio 2017 或更高版本例如 Visual Studio 2022 Professional。



更改 WebView2 控件的 source 屬性操作

using System.Windows.Forms;

Visual Studio 開發工具套件 .NET API 瀏覽器控制項,於 CoreWebView2 核心物件初始化完成後顯示當前指定的 source 網址內容,獲取該屬性相當於獲取 Source 屬性,設置屬性 Navigate(String) 方法。

this.WebView2.Source = new System.Uri("https://www.microsoft.com", System.UriKind.Absolute);

Uri 取得關於目前請求的 URL 資訊,提供統一資源識別元 URI 的物件表示,以及對 URI 各部分的簡易存取。

步驟參考 WinForms 應用程式中開始使用 WebView2

WebView2 支援 Microsoft Edge 的瀏覽器控制項可以嵌入 Microsoft Visual Studio 應用程式中在應用程式中顯示網頁內容,並提供與當前瀏覽器相同的功能和體驗。讓應用程序可以支援新世代的瀏覽器方案,例如 ECMA-262 等新的語法。
Get started with WebView2 in WinForms apps

webView01.CoreWebView2.Navigate("https://www.example.com");

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

瀏覽程式建議 WebView2 Font Size 字體看起來比較大,WebView2.ZoomFactor Property 畫面縮放率可以於屬性項目中的 WebView2 > ZoomFactor 縮放係數設置例如 0.9 縮小一些符合原本的 webbrowser 使用於顯示的尺寸比例問題。


Visual Studio 開發工具套件 WebView2 / EBWebView 暫存檔。因為使用 Chromium 的瀏覽器控制項,EBWebView 使用 WebView2 運行時通過 WebView2 環境來設定。暫存檔是 WebView2 應用程式使用的用戶數據資料夾用於存儲瀏覽器數據如 Cookie 權限和緩存的資源。暫存檔可以通過 WebView2 環境的第二個參數來指定,可使用多配置文件支持來在「單個用戶」Single User 數據文件夾下創建多個配置文件,但需要一段時間清除暫存的內容。

WebView2 應用程式 EBWebView 暫存檔資料夾 AutoLaunchProtocolsComponent, BrowserMetrics, CertificateRevocation, Crashpad, GraphiteDawnCache, GrShaderCache, OriginTrials, ShaderCache, SmartScreen, Speech Recognition, Subresource Filter, TpcdMetadata, Trust Protection Lists, TrustTokenKeyCommitments, WidevineCdm...


ChromiumGoogle Chrome 共享大部分程式碼

如果有新的發布版本可能會有些改變,可能涉及新的功能、修復和性能優化。基於 Chromium 內核編譯的瀏覽器、並且著重於保護瀏覽器隱私項目 Microsoft Edge 封裝、在 C# 中使用 Edge Web.WebView2,需要確定電腦上已安裝 Microsoft Edge 版本 80 或更高版本、而且在 Visual Studio 工具箱中使用 NuGet 管理器安裝 Microsoft.Edge.WebView2 NuGet 。



Microsoft Edge Chromium

Class 經典版 Edge 正式退役後,Microsoft 微軟將會把大部分中心都放在新版 Edge Chromium 提供支持當前 Web 技術。

未知 Internet Explorer 瀏覽器淘汰後,如果應用於本機的程式會如何,WebBrowser 改變為 WebView2 例如 document.execCommand("cut") 安全考量,以及細微版面變化,但仍然是應該隨時代進步來跟隨。


JavaScript 讀取本機電腦的字型

在 HTML 中顯示字型清單、改用 WebView2 則 classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" 受到安全性限制,無法使用直接來檢測和處理本地字型這是為了保護使用者的隱私和安全、及畫面縮放係數需要調整。

document.fonts.values();

遍歷所有字型,讀取本機電腦字型將字型名稱加入清單。



註冊表修改 webbrowser 指定內核為 IE11

但個項目已經不太需要,進入 Windows 11 使用 Visual Studio 載入舊檔案 webbrowser 已經出現許多錯誤。

電腦\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

11001(0x2AF9) - Internet Explorer11。無論!DOCTYPE 指令如何,網頁均以 IE11 edge mode 顯示。
11000(0x2AF8) - Internet Explorer11。包含基於標準!DOCTYPE 指令的網頁以 IE11 edge mode 顯示。IE11 的默認值。

修正的結果仍然不支持當前 Web 技術 HTML、CSS、JavaScript 建議使用 WebView2 更換,應用程序亦能升級。