WebViews are an essential component for modern Windows apps as they allow developers to integrate web content and web-based functionality within their applications. Blazor, on the other hand, is a web framework for building interactive client-side web UI with C# instead of JavaScript. Combining these two technologies can create a powerful hybrid application, but it can also result in some challenges. Separating the WebView from Blazor in Windows is a task that many developers face, and this article aims to guide you through the process.
Step 1: Create a Blazor WebAssembly App
The first step is to create a Blazor WebAssembly App using the dotnet CLI. Open a terminal and run the following command:
dotnet new blazorwasm -o MyBlazorAppThis will create a new Blazor WebAssembly App with the name MyBlazorApp. Navigate to the project folder by running the following command:
cd MyBlazorAppStep 2: Add a WebView to the App
Next, we need to add a WebView to the Blazor App. To do this, we will use the Microsoft WebView2 SDK, which is a set of libraries, tools, and samples for embedding Microsoft Edge (Chromium) in a Windows application.
Download and install the WebView2 SDK from the Microsoft website. Once installed, add the following NuGet package to your Blazor project:
Microsoft.Web.WebView2This package contains the necessary libraries and tools to use WebView2 in your application.
Step 3: Create a WebView Component
To create a WebView component, add a new Razor component to the Blazor project. Right-click on the Pages folder and select Add > Razor Component. Name the component WebViewComponent.
Add the following code to the WebViewComponent.razor file:
@using Microsoft.Web.WebView2.Core
<div id="webviewHost"></div>
@code {
private WebView2 webView;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var webViewEnvironment = await CoreWebView2Environment.CreateAsync();
webView = new WebView2();
await webView.EnsureCoreWebView2Async(webViewEnvironment);
webView.Source = new Uri("https://www.google.com");
await webView.EnsureCoreWebView2Async();
var webViewHost = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/webviewHost.js");
await webViewHost.InvokeVoidAsync("initialize", webView);
}
}
}
This code creates a WebView component and sets the source to https://www.google.com. The OnAfterRenderAsync method is called after the component is rendered and initializes the WebView.
Step 4: Add JavaScript Code
We need to add some JavaScript code to handle the WebView in our Blazor app. Add a new JavaScript file to the wwwroot/js folder and name it webviewHost.js.
Add the following code to the webviewHost.js file:
export function initialize(webView) {
window.addEventListener("beforeunload", () => {
webView.dispose();
});
}
This code initializes the WebView and disposes of it when the app is closed.
Step 5: Use the WebView Component
Finally, we need to use the WebView component in our Blazor app. Open the Index.razor file and add the following code:
<WebViewComponent></WebViewComponent>This code adds the WebView component to the Blazor app's index page.
Step 6: Run the App
To run the app, open a terminal and navigate to the project folder. Run the following command:
dotnet runThis will start the Blazor app in your default browser. You should see the WebView component displaying the Google homepage.
Conclusion
Separating the WebView from Blazor in Windows can be done by using the Microsoft WebView2 SDK and creating a WebView component in your Blazor app. By following the steps outlined in this article, you should now have a good understanding of how to accomplish this task. As always, it's important to stay up-to-date with the latest developments and best practices in web development and Windows app development to ensure that your applications are secure and efficient.
Comentarios