HybridWebView experiment - feedback requested!

[Eilon]

Hi everyone, based on ideas from these issues:

• [Enhancement] (HybridWebView) - Invoke C# code from JavaScript #6446 - [Enhancement] (HybridWebView) - Invoke C# code from JavaScript
• [Enhancement] Updating WebView control to support WebView applications #1148 - [Enhancement] Updating WebView control to support WebView applications

I've started an experimental .NET MAUI HybridWebView control. This control is designed to support scenarios where a static web app already exists (for example, a web app that uses HTML, JS, CSS, images, including frameworks such as ReactJS, etc.), and you want to host it in a .NET MAUI cross-platform application for mobile and/or desktop.

The control enables communication between the JS code and the .NET (C#) code using methods and events.

Find the source code and sample app here: https://github.com/Eilon/MauiHybridWebView

Current status (as of September 2023)

Check out the repo with source code and samples here: https://github.com/Eilon/MauiHybridWebView

And packages on NuGet.org: https://www.nuget.org/packages/EJL.MauiHybridWebView

The information below might be out-of-date, but is included for historical purposes.

Important updates (December 22, 2022):

• Added support for strongly-typed method calls between JS and .NET: HybridWebView experiment - feedback requested! #12009 (comment)
• Added sample that integrates an existing React Todo app: HybridWebView experiment - feedback requested! #12009 (comment)

How to use the control

Using the control involves:

1. Include the static assets of the web app into a folder such as Resources/Raw/MyHybridApp
2. Use the new HybridWebView control in your app, for example in a XAML file: <hwv:HybridWebView HybridAssetRoot="MyHybridApp" MainFile="index.html" MessageReceived="webView_MessageReceived" />
3. Plus a few minor configuration details

Send messages from .NET to JS

To send messages from .NET (C#) to JS code in the webview:

_ = webView.EvaluateJavaScriptAsync($"CallSomeJSMethod('param1', 123, 'another_param')");

Send messages from JS to .NET

And to send messages from JS to .NET (C#) you'd have a method like this:

        function SendMessageToDotNet(message) {
            if (window.chrome && window.chrome.webview) {
                // Windows WebView2
                window.chrome.webview.postMessage(message);
            }
            else {
                // Android WebView
                hybridWebViewHost.sendMessage(message);
            }
        }

And you'd receive the message in a C# event handler like this:

    private void webView_MessageReceived(object sender, HybridWebView.HybridWebViewMessageReceivedEventArgs e)
    {
        Debug.WriteLine($"Web Message Received: {e.Message}");
    }

Feedback

I encourage you to check out the sample app here: https://github.com/Eilon/MauiHybridWebView

And let me know any feedback you have. Does this solve a problem that you have? What else would you like to see? What apps would you build with such a feature?

[Redth]

Some quick thoughts/questions:

1. Could we inject a small bit of javascript to tidy up the JS side API? Instead of checking for chrome/android, one API call that does this work for you? I'm guessing you've thought of this already, just checking :)
2. Thoughts on a clean way to be just a bit opinionated at moving json back and forth? Maybe some overloads on each side with some potentially implicit serialization/deserialization?
3. Async/Await on both sides?
4. I'm rather unfamiliar with web and threading models, but what's the story here? can this be made to be multithreaded and/or rather high throughput? I seem to recall react native struggling with limitations in the interop bridge years ago...

[Eilon]

1. Could we inject a small bit of javascript to tidy up the JS side API? Instead of checking for chrome/android, one API call that does this work for you? I'm guessing you've thought of this already, just checking :)

Would be nice! I updated the sample to have all the "standard" methods in one JS file so it's more easily re-used. I'm a tiny bit wary of injecting it automatically because different apps might want to use it in different ways. But maybe by default it could be injected, but you could turn it off if you wanted to include the code another way?

2. Thoughts on a clean way to be just a bit opinionated at moving json back and forth? Maybe some overloads on each side with some potentially implicit serialization/deserialization?

Oh, yes, very opinionated! 😄 I added the ability to invoke methods with parameters in both directions:

• JavaScript can invoke .NET methods by calling HybridWebView.SendInvokeMessageToDotNet("DotNetMethodName", ["param1", 123]);
• .NET can invoke JavaScript methods by calling var sum = await webView.InvokeJsMethodAsync<int>("JsAddNumbers", 123, 456);

3. Async/Await on both sides?

I think this at least partially works? On the JS side I am far from an expert so there could be something missing. On the .NET side you can await things properly, e.g.:

var result = await myHybridWebView.EvaluateJavaScriptAsync($"CallJsMethod('param1', 123)");

4. I'm rather unfamiliar with web and threading models, but what's the story here? can this be made to be multithreaded and/or rather high throughput? I seem to recall react native struggling with limitations in the interop bridge years ago...

In the JS side normally everything is single threaded though I think there are more advanced patterns to allow "background threads" (service workers?). On the .NET side it's business as usual with multi-threading but only one UI thread. Beyond that, I'm not sure!

[xtuzy]

I see https://github.com/tauri-apps/tauri is very hot, what's the difference between them when package an existing web project.

[akhanalcs]

Good question.

[SF-Simon]

The goal of Tauri is to allow the web to call some methods of the native system, but it does not provide other UI support.

This project is mainly aimed at establishing communication between the JS and MAUI, allowing webview to implement more ideas. This is just a supplement to MAUI. Of course, if you want, you can also use this library to implement a framework similar to Tauri. Use the web to implement the UI, and use MAUI to implement native operations.

[akhanalcs]

This is interesting!
Can you pin it to the top of Discussions page so more devs are exposed to this.
I want this experiment to succeed! 😃

[wubalubadubdub55]

So, with this we can do like Tauri. This is very cool! Thanks!

[manishbisen]

This is interesting

[Eilon]

Hi everyone, I pushed a large update to the codebase and sample app so please check it out!

What's new:

1. Ability to invoke methods from JS to .NET and from .NET to JS with parameters in both directions:
   • JavaScript can invoke .NET methods by calling HybridWebView.SendInvokeMessageToDotNet("DotNetMethodName", ["param1", 123]);
   • .NET can invoke JavaScript methods by calling var sum = await webView.InvokeJsMethodAsync<int>("JsAddNumbers", 123, 456);
2. Simple string message passing is still enabled via a HybridWebView.RawMessageReceived event
3. Moved standard JS APIs into a single file HybridWebView.js so that it can be included in your app however you want

And I improved the demo app to show more features.

Here it is running on Windows (run the app, and then pick which "demo page" to view in order to enable certain functionality):

And here it is on Android:

(iOS and MacCatalyst not done yet!)

As always, please share any feedback you have. I'd love to hear how you would use such a feature and whether this experiment would help your app building experience!

[Eilon]

And now I am most excited to show how cool a true hybrid app can be! I have integrated an existing React app sample into .NET MAUI!

I found a cool React Todo App sample:

• Source code: https://github.com/mdn/todo-react
• Run the live web-based demo here: https://mdn.github.io/todo-react/
• This sample stores everything in memory with a default initial list of todo items.

I created a fork of it at https://github.com/Eilon/todo-react with 1 additional commit (only 79 new lines; 22 deleted lines) to add calls to get/send data to the .NET MAUI app. This way it can share data and interact with the native platform, for example, by storing the todo items in a database or via a remote API call.

You can find the source code for HybridWebView and the two sample apps (the earlier MauiCSharpInteropWebView sample, and the new MauiReactJSHybridApp sample) on my repo: https://github.com/Eilon/MauiCSharpInteropWebView

Here's the app running as a proper .NET MAUI hybrid app on Android:

And running on Windows:

[Eilon]

Initial support for MacCatalyst and iOS is merged into https://github.com/Eilon/MauiCSharpInteropWebView. The React sample isn't updated for that, plus I think I hit a known issue #11544 on iOS (doesn't always happen). Nevertheless, all four main .NET MAUI platforms are all basically working now!

iOS (ignore my awful XAML 'formatting' - I'm more of a web person 😁):

[juepiezhongren]

support appkit please, cat is with too much problems.

[SF-Simon]

It is said that in the future, AppKit may be banned from use on MacCatalyst.

[saber-wang]

Can SendInvokeMessageToDotNet implement the return value?

[danilobreda]

Is there a way not be 0.0.0.0, but a public url from a web server? I know webview does this, but we need the javascript <-> c# communication :/

[Eilon]

I think that in theory it could be any hostname or IP address. I think there are two reasons that 0.0.0.0 is used in BlazorWebView:

1. It guarantees that there is never a delay for DNS lookup. In theory there shouldn't be any DNS lookup anyway because all requests are handled internally, but someone found that some web views (maybe some old version?) got slowed down by it.
2. It's never a valid IP address so it guarantees that there can't be a conflict with any external content.

Beyond that, we've only seen one case with BlazorWebView where someone had a specific need for a particular hostname, and it was to do with the "licensing process" of some JavaScript component, where it would run only when hosted on a particular domain.

Can you share more info about how you would use this feature, if we enabled customizing the host?

[danilobreda]

My use case is a SPA application in Vue (Static SPA) that we made hybrid for desktop(browser) and mobile.
This application is deployed on a simple public web server http://example.com/spa/index.html

We saw that it is very interesting because the end user can have the update automatically without having to update the app (just refreshing the webview).

It's similar to your React example but it's hosted on the web.

The need to have the interaction between C# and Javascript is necessary for "Native Menu" calling the spa menu when clicked, downloading files and other nice functions.

We already have an example of this in production with an app made in reactnative, but we want to migrate to MAUI and add more functionality to the app

[Xyncgas]

In theory you can fetch html in .NET, put it on the current webview.
Or you can write a data driven web app, so your app looks different, if data changes inside your MongoDB

[alpvelioglu]

Hi everyone. Can I change https:/0.0.0.0 to http://localhost:4200 because I tried to change it in Angular but it didn't work. The thing is when I use HybridWebView, it's base URL is https:/0.0.0.0 and it can't connect to my API. @Eilon @danilobreda

[amartens181]

It would be nice to have a good way of exposing methods to interop. I currently use CefSharp and the way C# can be bound and called is pretty good: https://github.com/cefsharp/CefSharp/wiki/General-Usage#3-how-do-you-expose-a-net-class-to-javascript

I don't like having to use method names as strings; I would prefer mocking server API requests.

[amaitland]

It would be nice to have a good way of exposing methods to interop. I currently use CefSharp and the way C# can be bound and called is pretty good: https://github.com/cefsharp/CefSharp/wiki/General-Usage#3-how-do-you-expose-a-net-class-to-javascript

My proposal/prototype for a this is available at Eilon/MauiHybridWebView#3 (Only tested on Windows/Android Emulator at this point)

// .Net
// Add an object called 'host' that can be called from JavaScript
myHybridWebView.ObjectHost.AddObject("host", new MyJSInvokeTarget(this));

// JavaScript
// Create a proxy
const myDotNetObjectProxy = HybridWebView.CreateProxy("host");
// Call the method, await the result (promise) to get the returned value.
const result = await myDotNetObjectProxy.CallMeFromScriptReturn("Hello", 42);

Can SendInvokeMessageToDotNet implement the return value?

I've added support for return values and basic ability to await Task in .Net.

[saber-wang]

@amaitland
Maybe we should take a step further and inject HybridWebView.js into the current page automatically 😁

[Eilon]

@saber-wang in the latest preview I made it easier to reference HybridWebView.js by referencing a special built-in script URL (just like BlazorWebView does, if you're familiar with it).

Check out the getting started docs here: https://github.com/Eilon/MauiHybridWebView/#getting-started

And in Step 5 you can see the special script reference <script src="_hwv/HybridWebView.js"></script>, which works without having the file as part of the project.

[NickDarvey]

And let me know any feedback you have. Does this solve a problem that you have? What else would you like to see?

I'd like a HybridWebView component so we can build a UI with fsharp using Fable and build platform-native bits with fsharp using dotnet.
(There's plenty of alternatives, but I think this combination will satisfy our constraints.¹)

I'd like this component to expose an unopiniated transport for bidrectional communication between dotnet and javascript that makes it easy for application developers to implement different protocols atop it. For example:

1. In our application we might like to use a BFF pattern where the dotnet, platform-native bits is a 'backend' and fulfills the services that the Fable 'frontend' requires. We might implement this with Fable.Remoting which let's us do RPC using typed proxies. Fable.Remoting is hardcoded to use HTTP but I'd fork it to support HybridWebView's transport or tunnel HTTP over HybridWebView's transport.

2. Other applications might like to use gRPC because of its ability to generate type definitions for each language.

3. Blazor could use this transport in future for their protocol.

4. People might want to use 'object proxies' like proposed here.

5. There could be one (or more) built-in protocols available like the method-invocation one you've demonstrated here

I don't know what this transport abstraction would look like, but I'm looking for something higher level than the various webview's script execution methods (for example, ExecuteScriptAsync) and expressive enough for the examples above. Perhaps some inspiration can be taken from ASP.NET connection abstractions. Perhaps the method-invocation abstraction is the right one. 🤷

The alternative is each of these examples needs to implement their own HybridWebView component that supports the protocol they like.

Footnotes

1. 1. Our core libraries are written with dotnet and rely on runtime types and other dotnet libraries, so
      1. we can't just recompile our fsharp with Fable and use something like React Native (which is why this and MAUI is attractive), but
      2. we could compile our our core libraries to webassembly.
   2. I want to use fsharp everywhere because our team is very productive in fsharp and switching languages causes friction.
   3. I don't want to use MAUI for UI because I want to use the MVU pattern and the closest thing it had to an MVU pattern is unlikely to be developed. (And it wasn't particularly Elm MVU anyway.)
   4. I don't want to use Tauri because that'll introduce a different language.
   5. I don't want to use MAUI with Fabulous or Avalonia with FuncUI or Elmish.Avalonia because I want very fast feedback for edits and the fsharp compiler doesn't support hot reload (but Fable does, for example, with Fable.Lit)
   ↩

[420tech]

One feature I would like to see is to enable debugging with web DevTools. Lot's of times you need to inject some JS or evaluate some JS and it would be nice to see what is going on in the DOM

[Eilon]

@420tech that should already work! Check out this closed issue: Eilon/MauiHybridWebView#20

This should be available in the latest public preview from NuGet.org.

[epsmae]

@Eilon I like the Idea of what you did so far.
I am wondering if it would not make sense or if it even is possible to use something like graphql for the C# / JS communication.
This would make it easer for C# and for Web developer as they are already use to it, and I believe it would be less error prone.

[Eilon]

That's not something I considered, but could be interesting for someone to experiment with. I think right now I'm mostly trying to solve the low-level communication that enables C#/JS communication in general, and then people can implement additional protocols on top of that, including GraphQL. (I'm a big fan of GraphQL!)

[Xyncgas]

GraphQL is trying, it's the new hot thing, but it's not there yet imo

[DreamX69]

@Eilon I found bug HybridWebView can't load image from svg file but can load from png file

[Eilon]

@DreamX69 - can you please file a bug at https://github.com/Eilon/MauiHybridWebView/issues with details to reproduce the issue? Thanks!

[suchithm]

Any update on iOS support?

[Eilon]

Hi @suchithm , it looks like I didn't update the original post - all main .NET MAUI platforms are already supported: Windows, Mac, iOS, and Android.

Check out the repo with source code and samples here: https://github.com/Eilon/MauiHybridWebView

And packages on NuGet.org: https://www.nuget.org/packages/EJL.MauiHybridWebView

[poohGeorge]

Hi! Ellion. Can you give me the way to convert my own react app to hybrid app using hybridwebview. Mine is using sqlite database and I am wondering how I can integrate database in desktop and mobile app.
Your todo react app only use state variables and so I couldn't find solution from your project. Best Wishes.

[danilobreda]

i think you need a rewrite to MAUI, the demo is not a react app, its a react web frontend page that works on browser.

[JordinKee]

Hi @Eilon I just want to say this looks awesome and I hope it becomes a part of MAUI!

[vsg24]

Just wanted to say thank you for this! Much needed if MAUI is to be taken seriously!

[HobDev]

HybridWebView proved very helpful in implementing payment gateway to Maui App. The payment card data should be captured by the payment gateway provider through iframe. I used HybridWebView for embedding the iframe of Payment Gateway. Otherwise I would need a website to do this task which would also deteriorate the user experience.
This is a must have feature in dotnet maui. Waiting for it's stable release.

[ncaatrackstar]

Hi @Eilon. I wanted to thank you for creating this webviewer control. I had a question to ask you though, I was wondering if:

1. In c# can the HybridWebView.RawMessageReceived event return a value back to javascript?
2. If the first question is not the case is there a way that the below can be accomplished to do something similiar?
   function CallDotNetMethod() { Log('Calling a method in .NET with some parameters'); var result = HybridWebView.SendInvokeMessageToDotNet("CallMeFromScript", ["msg from js", 987]); alert(result); }

[Eilon]

Hi, there are some new APIs that were added from a contributor that I think enable this to work. Check out this updated sample code:

https://github.com/Eilon/MauiHybridWebView/blob/main/MauiCSharpInteropWebView/Resources/Raw/hybrid_root/methodinvoke.html#L28-L48

For example:

var r = await HybridWebView.SendInvokeMessageToDotNetAsync('RoundTripCallFromScript', ["param1", 123]);

This new API is available if you update the NuGet packages in your project.

[Xyncgas]

1. what's different between .invokeMethodAsync w/ .SendInvokeMessageToDotNetAsync
2. how efficient would this be
3. If returned a .NET object how can I use it in javascript

[Eilon]

@Xyncgas - from JS there's only SendInvokeMessageToDotNetAsync and it's used to have JS code call into .NET code, and optionally get a return value. Several of the highlighted example in above get a full object in the return value - it uses JSON to serialize/deserialize. How efficient is it? I haven't tested but surely for small objects it's just fine. For large objects (say a million rows of data) it's probably not great!

[Xyncgas]

.invokeMethodAsync was described as the method to call .NET code from javascript in this document
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-8.0
Thanks for replying it's helpful

[Eilon]

@Xyncgas that method is specifically a feature of Blazor and can be used with BlazorWebView. The ones I'm talking about are for HybridWebView, which is usually not used with Blazor.

[MonzaCreatives]

Hi, I'm trying to figure out how to use the FileSystem.AppDataDirectory as the root folder for a HybridWebView instance. Ideally I'd like to have my html, css, js and image assets in that one folder (or sub-folder). Thanks.

[Xyncgas]

FileSystem.AppDataDirectory is simply where the executable is if I was correct
In MAUI.Blazor that's usually in the APPX folder which is where the executable is I guess
in photino.blazor which is a hybrid webview it's where the executable is

[MonzaCreatives]

Hi, its my understanding that the app data folder is the folder that contains content that can be modified, as opposed to the package folder that cannot. I need to have the web assets in a folder that holds content that can be modified. Thanks.

[GorillaSpring]

@MonzaCreatives , did you ever get this sorted out. I am downloading html ui and need to load it from the AppDataDirectory too. Don't want to create my own HybridWebView build.

[andrew-vdb]

To be clear, is this work only for local html? Or can i simply put hybridwebview that point to my website and my website detect if hybridwebview request the page and add additional logic that can call native function?

[andrew-vdb]

Like android web view, work for both local and remote html
https://developer.android.com/develop/ui/views/layout/webapps/webview#kotlin

[Eilon]

The intention of HybridWebView is to work for only local content. You might be able to make it work with other content, but that's not part of the design. That is, HybridWebView is an alternative way for a native app to show its UI, and not necessarily a model for a different way of architecting apps.

[andrew-vdb]

Thats too bad. I can imagine hybridwebview to work with whitelisted url with local fallback... in my webapp ssr i simply detect if its requested by hybridwebview, add additional js function that can call native function

Or i can do it during build but that additional "barrier"

[szv]

Will the HybridWebView control provide the possibility to configure the content-type of the root file?

In the following code, I can see that the content-type is hard-coded to "text/html".

maui/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Windows.cs

Lines 120 to 124 in 5d22e79

	if (string.IsNullOrEmpty(relativePath))
	{
	relativePath = VirtualView.DefaultFile;
	contentType = "text/html";
	}

In case of .mhtml, the content-type would be "multipart/related" or "message/rfc822", which is also configured in https://github.com/dotnet/maui/blob/9.0.0-rc.1.24453.9/src/Core/src/Handlers/HybridWebView/FileExtensionContentTypeProvider.cs for related files.

[Eilon]

I don't think there's a way to do that right now, but it's a good suggestion!

[jingliancui]

Hi @Eilon, there are 2 things I want you to clarify please.

1. I noticed that the issue described "static" web content, I wonder if it supports "dynamic"? Or could you provide a switch to support this? Due to I can see the control almost perfectly than the webview in feature level.

2. Not sure if the control will lead memory leak issue if the page or window get created and closed frequently.

Thanks