HybridWebView is official in .NET MAUI 9! 🥳

[Eilon]

Hello everyone and thank you for your patience!

As of July 18, 2024, the initial version of the official HybridWebView control is part of .NET MAUI in .NET 9 from this PR: dotnet/maui#22880. It will be available in the upcoming .NET 9 Preview 7 release.

That PR has only the most basic functionality, and more is being worked on now. The list of issues and PRs under consideration is available here: https://github.com/dotnet/maui/labels/area-controls-hybridwebview

Some names, designs, patterns, and behaviors will be different in the official version compared to the experimental version that is in this repo. This is in large part because a lot of the code in this repo was written for the purpose of being an experiment with rapid iteration, as opposed to thinking about long-term requirements.

Please share your thoughts in the .NET MAUI repo at https://github.com/dotnet/maui/issues or within any of the relevant HybridWebView issues/PRs regarding the official version.

And I'd also like to thank everyone here for the feedback, testing, code contributions, and bug reports. It really did make a difference and was a large factor in deciding to make the control an official supported feature.

[jonmdev]

Great news. Fantastic component that performs at least 3 integral functions in my major app I am developing. Thanks for this and happy to hear it is part of the main official MAUI for future proofing. 🙂💪

[rbrundritt]

Awesome! Love it. Hope we can get some of the newer additions into there eventually.

[nine-2-five]

This doesn't work for me in MAUI 9 Preview(NET SDK 9.0.100-rc.1.24452.12):
No exception, nothing happens.

double lat = location.Latitude;
double lng = location.Longitude;

var ret = await hybridWebView.InvokeJavaScriptAsync<double>("updateLocation", WbJsContext.Default.Double, [lat, lng], [WbJsContext.Default.Double, WbJsContext.Default.Double]);
Console.WriteLine(ret);

 <script>
     window.addEventListener(
         "HybridWebViewMessageReceived",
         function (e) {
             var messageFromCSharp = document.getElementById("messageFromCSharp");
             messageFromCSharp.value += '\r\n' + e.detail.message;
         });

     function updateLocation(lat, lng) {
         //alert(`received lat:${lat} lng:${lng} from c#, displaying`);     
         var messageFromCSharp = document.getElementById("messageFromCSharp");
         messageFromCSharp.value += '\r\n' + lat;

         return 0;
     }
 </script>