【译】来看看WebWindow,一个跨平台的.NET Core webview 库
本文翻譯自 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 包:
<ItemGroup><PackageReference Include="WebWindow" Version="0.1.0-20191120.3" /> </ItemGroup>接下來,將代碼添加到 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 库的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: .net 微服务实践
- 下一篇: ASP.NET Core 反向代理部署知