[Enhancement] (HybridWebView) - Invoke C# code from JavaScript

[Sergtek]

Description

In Xamarin.Forms to invoke C# code from JavaScript in a WebView there is official documentation from Microsoft:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

This suggestion is to add new documentation on HybridWebView for .NET Maui as custom renderers are used in the Xamarin.Forms documentation and now with .NET Maui custom renderers are deprecated so it would be interesting to add examples using Handlers and in the Xamarin.Forms the Windows sample supports UWP but now with .NET Maui we need a WinUI 3 compatible sample, and Microsoft now officially supports macOS, so an example should be added for this platform as well.

Public API Changes

Create HybridWebView for .NET Maui using Handlers instead of custom renderers and adding examples for WinUI 3 and macOS.

Intended Use-Case

Invoking C# code from JavaScript in a WebView is very common in many applications and Xamarin.Forms has documentation from Microsoft covering this topic so it stands to reason that .NET Maui which is the successor technology to Xamarin.Forms will receive the same support in all officially supported platforms: Android, iOS, WinUI 3 and macOS.

[fairking]

I am almost there. The only issue is this one https://gitlab.com/fairking/mauiwebviewsample

Also the Blazor is an interesting approach one: https://gitlab.com/fairking/mauiblazorwebview

More info here: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet

[Eilon]

We have some ideas to make this type of IPC a lot easier: #1148

But it's not currently in the plans.

We do have BlazorWebView, which enables running Razor components in .NET MAUI apps on all supported platforms, which includes C#/JS interop.

[fairking]

We do have BlazorWebView, which enables running Razor components in .NET MAUI apps on all supported platforms, which includes C#/JS interop.

1. C# to Js calls are not available NullReference exception when evaluating JS aspnetcore#41339
2. Thinking of hot reload for other pwa frameworks like vue (not just Blazor).

[luetm]

We have some ideas to make this type of IPC a lot easier: #1148

But it's not currently in the plans.

We do have BlazorWebView, which enables running Razor components in .NET MAUI apps on all supported platforms, which includes C#/JS interop.

But that doesn't cover the following use case: Hosting a Blazor Server app in a MAUI shell. Like that you can have an app that runs in a browser, with a MAUI version if you need enhanced support for local resources (e.g. local applications). In the end we just need a way to send messages from the Blazor Server app to the MAUI shell. At the moment this is not possible, correcct?

[Eilon]

@luetm not directly, but that's what this feature proposal would make easier. For now you could use a regular .NET MAUI WebView (not BlazorWebView) and register JavaScript callbacks to communicate between the code in the web view (which would be your Blazor Server app, which is really just a web app), and the .NET code running in .NET MAUI. But it's all manual.

[jameslin0312]

Yes, we really need a Blazor server app to access mobile resources through calling C# from JavaScript too. Is "Customizing a WebView" available in MAUI?

[fairking]

Yes, we really need a Blazor server app to access mobile resources through calling C# from JavaScript too. Is "Customizing a WebView" available in MAUI?

This is already available in BlazorWebView. See https://gitlab.com/fairking/mauiblazorwebview/-/blob/master/MauiApp1/wwwroot/index.html#L43

[jameslin0312]

@fairking Thanks for your reply. I will test it. By the way, is there any documentation about "DotNet" usage? Can I use HostPage with external url?

[fairking]

@fairking Thanks for your reply. I will test it. By the way, is there any documentation about "DotNet" usage? Can I use HostPage with external url?

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript

[jameslin0312]

@fairking It doesn't seem to resolve my problem. I need a WebView or BlazorWebView to connect remote Blazor server web site, and the JavaScript loaded from the web site needs to call C# functions to access device resource. I have tried setting remote url to HostPage of BlazorWebView without any RootCimponents. But the app shows "There is no content at".

[fairking]

@fairking It doesn't seem to resolve my problem. I need a WebView or BlazorWebView to connect remote Blazor server web site, and the JavaScript loaded from the web site needs to call C# functions to access device resource. I have tried setting remote url to HostPage of BlazorWebView without any RootCimponents. But the app shows "There is no content at".

Sorry, I don't understand what you are trying to achieve.
Do you want to call backed (c#) from WebView (JS) in Desktop/Mobile application?
That link I provided is exactly for such purpose. The only issue with BlazorWebView is there is no communication in opposite way (to call frontend from backend).

You say "Blazor server web site" which for me is simply a client running in BlazorWebView (using WebAssembly to compile) and communicating with the server via HTTP as any other SPA application. Unless I am wrong. Please someone correct me as I don't use Blazor. I prefer Vuejs/Typescript.