.NET MAUI 9: Introducing the HybridWebView Project Template

HybridWebView is one of the two prominent enhancements in .NET MAUI 9, the recently released major version of the cross-platform App UI framework.

An article that comprehensively outlines the significant features of this version has already been published and is accessible here.

Consult this article titled Exploring .NET MAUI 9 – HybridWebView to delve into the details of this new control.

Nonetheless, the components that constitute the HybridWebView project must be assembled manually, as there is no inherent template available akin to that of Blazor Hybrid. So, it is appropriate to include one in the .NET MAUI All-in-One Templates pack. As the name suggests, has a slew of features under the hood to work with .NET MAUI, consult the articles linked here to know more about them.

Glad to introduce a new project template using HybridWebView in the templates pack v6.1. This article will describe how to install and utilize this new project template.

Install:

From CLI:

Here is the command to install the CLI templates pack, and the de-facto option for non-Windows and Rider users.

dotnet new install VijayAnand.MauiTemplates

From VS2022:

To install as VSIX, download and install from Visual Studio Marketplace or use the Extension Manager (shortcut: Alt+X+M) from within the IDE, search with the maui keyword with the Online/Browse  Tab in focus, and look for .NET MAUI Project and Item Templates.

Project Template:

On CLI:

To facilitate this, the design pattern (-dp) parameter includes a new option named JSHybrid. This creates an App project using this HybridWebView with all prerequisites set automatically, requiring no manual intervention.

dotnet new mauiapp -o MyApp -dp JSHybrid

On VS2022/Rider IDE:

Please refer to the screenshots furnished below for details.

In VS2022, the Application Design option is a dropdown UI control within the Project Options page. Select JSHybrid as its value (highlighted one).

On Rider, the dropdown UI control is shown as a design-pattern.

Note: Since HybridWebView is a feature introduced in .NET MAUI 9, creating a .NET MAUI 8 App with this JSHybrid option will NOT result in an error; instead, it will fall back by creating an App project that corresponds to the default Plain value from both the CLI and the IDE.

Blazor Hybrid:

The design pattern (-dp) parameter set to the value Hybrid will continue to create an App project utilizing BlazorWebView, which is compatible with both .NET MAUI 8 and 9, the presently supported stable releases.

dotnet new mauiapp -o BlazorApp -dp Hybrid

Adaptive UI:

As an additional feature, this HybridWebView project template is designed with an Adaptive UI. When using a Mobile or Tablet, the user may rotate the device, prompting the UI to automatically adjust to the change in orientation.

Output:

Similar to Blazor Hybrid, there exists a seamless interaction between .NET and JavaScript, which is hosted on the HTML page, and rendered within the HybridWebView.

Users can type a message in the text field and hit Enter or click the Send button to transmit the message to the other component.

Copy your Angular and React SPAs into the Resources\Raw\wwwroot folder and update the index.html page with the necessary reference to the static assets. Ensure the hwv.js file, the script that powers the HybridWebView, stays included while doing so.

Help and Support:

dotnet new mauiapp -h

Documentation is available here. If you have any issues or features to suggest, please raise an issue with appropriate details here. Ideas are most welcome.

If you find this extension useful, kindly support the work by adding your review to the VS Marketplace and also by adding a Star to the GitHub repository where it’s actively maintained. Also, share the word with your team, inner circle, and social media.

Much of my time is spent on adding new features to the templates pack if you want to recognize the work and sustain the momentum, kindly consider sponsoring on the GitHub Sponsor page or Buy Me a Coffee page. Thanks in advance.

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.