當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

【译】来看看WebWindow，一个跨平台的.NET Core webview 库

發(fā)布時間：2023/12/4 asp.net 77 豆豆

生活随笔收集整理的這篇文章主要介紹了【译】来看看WebWindow，一个跨平台的.NET Core webview 库小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本文翻譯自 ASP.NET 項目組的 Steve Sanderson 的博客，發(fā)表于 2019 年 11 月 18 日。Steve Sanderson 是 Blazor 最早的創(chuàng)造者。

它類似于 Electron，但沒有捆綁 Node.js 和 Chromium，也沒有大部分 API。

我的上一篇文章研究了如何用 web 渲染的 UI 構建一個 .NET Core 桌面或控制臺應用程序，而不需要引入全部的 Electron 部件。這似乎引起了很多人的興趣，所以我決定將其升級到新的技術并添加跨平臺支持。

最終成果是一個名為 WebWindow^[1] 的小 NuGet 包，你可以將它添加到任何 .NET Core 控制臺應用程序中。它可以打開一個包含基于 web 的 UI 的本機操作系統(tǒng)窗口（Windows/Mac/Linux），而無需您的應用程序綁定 Node 或 Chromium。

我還把它和 Blazor 解耦了。您現(xiàn)在可以在窗口內托管任何類型的 web UI。repo 中包含一個使用 Vue 的示例，還有一個使用了 Blazor。

注意： 這個庫是超前 alpha 質量的。如果你想用它來構建一些真實的東西，請看這篇文章末尾的注釋。到目前為止，這只是另一個原型。

“Hello World” 示例

創(chuàng)建一個新的 .NET Core 3 C# 控制臺應用程序，然后添加一個引用到 WebWindow NuGet 包:

接下來，將代碼添加到 Program 類中的 Main 方法。

static void Main(string[] args) {var window = new WebWindow("My super app");window.NavigateToString("<h1>Hello, world!</h1> This window is from a .NET Core app.");window.WaitForExit(); }

這樣就完成了！現(xiàn)在根據(jù)你運行的操作系統(tǒng)，你的應用程序會顯示如下窗口：

這個示例使用 NavigateToString(html) 從硬編碼的 .NET 字符串渲染 HTML。你也可以：

使用 NavigateToUrl(url) 來顯示來自 HTTP 服務器的內容(本地或遠程)
使用 NavigateToLocalFile(path) 來顯示來自本地磁盤的 HTML 文件，其中 path 是絕對路徑或相對于當前工作目錄的路徑。示例在這里^[2]

作為一個稍微高級一些的選項，您可以配置 WebWindow 來處理自定義協(xié)議，如 myapp://，并指定一個委托（回調），它可以為該協(xié)議中的每個 URL 返回任意內容。示例在這里^[3]和這里^[4]。

一旦您的 web 內容正在運行，JavaScript 和 .NET 之間的底層通信方式就是在 JS 中使用 window.external.sendMessage/receiveMessage API（示例^[5]）和在.NET 中使用 webWindowInstance.SendMessage 和 webWindowInstance.OnWebMessageReceived API -（示例^[6]）。但是，如果您正在構建一個 Blazor 應用程序，則不需要使用這些底層 API，而可以使用 Blazor 常規(guī)的 JS 互操作特性。

托管一個 Blazor 應用程序

WebWindow 并沒有與 Blazor 耦合。這里是一個使用 Vue.js 在 WebWindow 內呈現(xiàn)一個簡單的目錄資源管理器應用程序的例子^[7]。

但如果你真的想用 Blazor，那是非常整潔和簡單的。我還做了一個小插件包，WebWindow.Blazor^[8]，它可以讓你在你的 Program.Main 中只用一行代碼就能運行一個 Blazor 應用程序。

static void Main(string[] args) {ComponentsDesktop.Run<Startup>("My Blazor App", "wwwroot/index.html"); }

概括地說，這并不涉及 WebAssembly、Node.js 或者是一份私有綁定的 Chromium。它只是在本地運行 .NET Core，直接與操作系統(tǒng)自己的 web 渲染技術進行通信。這一次在 macOS 上的運行結果是:

完整的 WebWindow+Blazor 示例在這里^[9]。

他是如何工作的

在 Windows 上，WebWindow 通過 `webview2` 使用新的基于 Chromium 的 Edge^[10]，假設你已經(jīng)安裝了那個瀏覽器（如果你不安裝，它可能會退回到舊的 Edge，但我還沒有實現(xiàn)）
在 Mac 上，它使用了操作系統(tǒng)內置的WKWebView^[11]，這與 Safari 背后的技術相同
在 Linux 上，它使用了 WebKitGTK+2^[12]，這也是一種基于 WebKit 的技術

這一切的關鍵在于，與使用 Electron 相比，開發(fā)出下載體積更小和內存使用更少的應用程序。但事實果真如此嗎？以下是下載大小的統(tǒng)計數(shù)據(jù)：

正如您所看到的，無論您選擇“獨立”（捆綁了.NET Core 運行時的一個副本）還是“依賴于框架”（依賴于已安裝在目標系統(tǒng)中的 .NET Core），都會對最終的應用程序大小產生巨大的影響。依賴于框架的 WebWindow 應用程序真的可以很小，因為它們只包含您自己的應用程序的二進制文件，并且沒有捆綁運行時或瀏覽器。

接下來，是內存使用統(tǒng)計:

在 Windows 上，WebWindow 和 Electron 使用的是相同的瀏覽器技術（Chromium），這種技術占用了大部分內存。這就解釋了為什么他們之間的差異并不是很大。在 Linux 和 Mac 上，使用自綁定瀏覽器（指 Electron）與使用操作系統(tǒng)內置技術之間的區(qū)別更為明顯。

這個項目會得到支持和維護嗎？

目前我還沒有做出任何承諾！現(xiàn)在最好把它看作是另一個實驗。如果有足夠多的人想?yún)⑴c進來，就有可能創(chuàng)建一個合適的開源社區(qū)項目。

最迫切需要的是有 C++ 經(jīng)驗的人來重寫我的原型質量的 C++ 和 Objective-C 代碼，使其真正完善。我已完成所有內存管理的概率接近于 0。也許它也應該使用 CMake 或其他健全的構建配置系統(tǒng)。（注意：它確實有一個基于 Azure DevOps 的跨平臺 CI^[13]。）

如果您打算在生產中使用它，那么您還需要添加大量的特性。例如，設置應用程序圖標、添加本地菜單欄等功能。如果您有興趣貢獻這樣的功能，并將使其跨平臺工作，請來這個 repo^[14]！

本文翻譯自：https://blog.stevensanderson.com/2019/11/18/2019-11-18-webwindow-a-cross-platform-webview-for-dotnet-core/

參考資料

[1]

WebWindow: https://www.nuget.org/packages/WebWindow

[2]

示例在這里: https://github.com/SteveSandersonMS/WebWindow/blob/a01537a9328b085075866a965191d6323ad2cf7d/samples/HelloWorldApp/Program.cs#L11

[3]

這里: https://github.com/SteveSandersonMS/WebWindow/blob/a01537a9328b085075866a965191d6323ad2cf7d/testassets/HelloWorldApp/Program.cs#L14

[4]

這里: https://github.com/SteveSandersonMS/WebWindow/blob/a01537a9328b085075866a965191d6323ad2cf7d/testassets/HelloWorldApp/wwwroot/index.html#L11

[5]

示例: https://github.com/SteveSandersonMS/WebWindow/blob/a01537a9328b085075866a965191d6323ad2cf7d/testassets/HelloWorldApp/wwwroot/index.html#L14-L20

[6]

示例: https://github.com/SteveSandersonMS/WebWindow/blob/a01537a9328b085075866a965191d6323ad2cf7d/testassets/HelloWorldApp/Program.cs#L21-L24

[7]

使用 Vue.js 在 WebWindow 內呈現(xiàn)一個簡單的目錄資源管理器應用程序的例子: https://github.com/SteveSandersonMS/WebWindow/tree/master/samples/VueFileExplorer

[8]

WebWindow.Blazor: https://www.nuget.org/packages/WebWindow.Blazor

[9]

WebWindow+Blazor 示例在這里: https://github.com/SteveSandersonMS/WebWindow/tree/master/samples/BlazorDesktopApp

[10]

通過 webview2 使用新的基于 Chromium 的 Edge: https://docs.microsoft.com/en-us/microsoft-edge/hosting/webview2

[11]

WKWebView: https://developer.apple.com/documentation/webkit/wkwebview

[12]

WebKitGTK+2: https://webkitgtk.org/

[13]

基于 Azure DevOps 的跨平臺 CI: https://dev.azure.com/SteveSandersonMS/WebWindow/_build?definitionId=2

[14]

來這個 repo: https://github.com/SteveSandersonMS/WebWindow

總結

以上是生活随笔為你收集整理的【译】来看看WebWindow，一个跨平台的.NET Core webview 库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： .net 微服务实践
下一篇： ASP.NET Core 反向代理部署知