[Enhancement] BlazorWebView

[CommonLoon102]

Summary

To enable MAUI Blazor apps, a BlazorWebView will be needed. Related discussion: https://github.com/dotnet/maui/discussions/1521

API Changes

New BlazorWebView component. Since there is no Edge WebView2 for Linux so far, maybe libwebkit2gtk could be used? Related issue for WebView on Linux: https://github.com/MicrosoftEdge/WebView2Feedback/issues/645

Intended Use Case

Create MAUI Blazor apps. This way developers can write the UI in HTML (razor), CSS and C# via (re)using Blazor components.

[CommonLoon102]

Maybe it doesn't worth to wait for WebView2 because it is quite frowned on by the free software community due to its vague user data collection habits: https://github.com/MicrosoftEdge/WebView2Feedback/issues/916

[CommonLoon102]

Related: https://github.com/lytico/maui/issues/9 https://github.com/lytico/maui/issues/1

[CommonLoon102]

I found a sample in Pascal, how to run javascript and get the results via WebKit: https://github.com/eugenekryukov/crosswebview/blob/7848d3803abe04c61c1f5901a9cdbb1d4cecccf9/CVcl.WebView.Linux.pas#L323

This is basically the only thing needed for BlazorWebView. Of course we need to use async/await instead of busy wait.

This is the MAUI implementation for WebKit on Android: https://github.com/dotnet/maui/blob/main/src/BlazorWebView/src/Maui/Android/WebKitWebViewClient.cs

PostWebMessage: https://github.com/dotnet/maui/blob/96886c3a02a11ef2d8aebad60e3e923047f99b3b/src/BlazorWebView/src/Maui/Android/AndroidWebKitWebViewManager.cs#L49 is just this: https://developer.android.com/reference/android/webkit/WebView#postWebMessage(android.webkit.WebMessage,%20android.net.Uri) https://html.spec.whatwg.org/multipage/web-messaging.html#posting-messages https://developer.android.com/reference/android/webkit/WebMessage https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/webkit/WebView.java?q=postwebmessage&ss=android%2Fplatform%2Fsuperproject

Maybe using the iOS implementation would be easier because the Android WebView has CreateWebMessageChannel() and WebKit WebView doesn't have it. https://github.com/dotnet/maui/blob/96886c3a02a11ef2d8aebad60e3e923047f99b3b/src/BlazorWebView/src/Maui/iOS/BlazorWebViewHandler.iOS.cs#L25 But it needs the user scripts api (webkit_user_content_manager_add_script and webkit_user_content_manager_register_script_message_handler, webkit_settings_set_enable_developer_extras).

https://raw.githubusercontent.com/gircore/gir-files/master/WebKit2-4.0.gir

[lytico]

GtkSharp-Webkit support is done, see: https://github.com/GtkSharp/GtkSharp/pull/271

the current problem is the lack of support of js-engine in GtkSharp see: https://github.com/GtkSharp/GtkSharp/pull/274

[pha3z]

Is there any movement on this? I want to be all-in on a project that uses BlazorWebView for full xplat development, but my project must support ios, android, windows, macos and most definitely linux.

[CommonLoon102]

https://github.com/JinShil/BlazorWebView

[lytico]

i try to adopt it, and get nearer to gktsharp: https://github.com/lytico/GtkSharp.BlazorWebView/tree/lytico/ongoing

the good thing is, it don't use JavaScriptCore-Lib, so https://github.com/GtkSharp/GtkSharp/pull/274 is not needed

[CommonLoon102]

Something is happening: https://github.com/lytico/GtkSharp.BlazorWebView/compare/lytico/ongoing...JinShil:BlazorWebView:main

@czirok maybe it would be a good idea to join forces.

[lytico]

@CommonLoon102 even more is happening: https://github.com/jsuarezruiz/maui-linux/pull/62

[lytico]

current state:

[CommonLoon102]

Very impressive. So this would be part of MAUI for Linux, right? What else do we need/have to have a minimal usable thing? You have GTK Window and Tab Control as I can see on the video. What would be still needed is Gnome notification integration, and menubar (at the top of the app/window). What else?

Actually, the top menu bar could be just replaced by HTML as well.

What about OS notifications? If WebKit could do it via JavaScript, that could be triggered by the app itself as well.

[charleypeng]

current state:

this is awesome ! Is it possible to port to avalonia? I am going to take a look at this code.

[lytico]

merged into/implemented in: https://github.com/jsuarezruiz/maui-linux/pull/66