HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app #22880

Eilon · 2024-06-06T05:31:15Z

This is based on the original experimental code at https://github.com/Eilon/MauiHybridWebView

Description of Change

A new HybridWebView control that hosts a local JS/HTML/CSS application in a cross-platform WebView. The C# (.NET) code in the .NET MAUI app and the JS code in the HybridWebView can communicate with each other via messages. The entire app is self-contained; that is, there is no network traffic or HTTP calls used to host the app (unless the app chooses to request remote content, such as calling a web API).

Issues Fixed

Fixes #22302

jsuarezruiz

Require changes in the publicAPI files:

D:\a\_work\1\s\src\Core\src\Handlers\HybridWebView\HybridWebViewHandler.Windows.cs(68,22): error RS0016: Symbol 'MapSendRawMessage' is not part of the declared public API (https://github.com/dotnet/roslyn-analyzers/blob/main/src/PublicApiAnalyzers/PublicApiAnalyzers.Help.md) [D:\a\_work\1\s\src\Core\src\Core.csproj::TargetFramework=net8.0-windows10.0.19041.0]
D:\a\_work\1\s\src\Core\src\Handlers\HybridWebView\HybridWebViewHandler.Windows.cs(173,16): error RS0016: Symbol 'SendRawMessage' is not part of the declared public API (https://github.com/dotnet/roslyn-analyzers/blob/main/src/PublicApiAnalyzers/PublicApiAnalyzers.Help.md) [D:\a\_work\1\s\src\Core\src\Core.csproj::TargetFramework=net8.0-windows10.0.19041.0]
D:\a\_work\1\s\src\Core\src\Handlers\HybridWebView\HybridWebViewHandler.Windows.cs(167,11): error RS0016: Symbol 'HybridPlatformWebView' is not part of the declared public API (https://github.com/dotnet/roslyn-analyzers/blob/main/src/PublicApiAnalyzers/PublicApiAnalyzers.Help.md) [D:\a\_work\1\s\src\Core\src\Core.csproj::TargetFramework=net8.0-windows10.0.19041.0]
    30 Warning(s)
    290 Error(s)

Just let me know if can help with anything :)

src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/index.html

mattleibow

Just scanning the code and got some nit comments

src/Controls/src/Core/HybridWebView/HybridWebView.cs

src/Core/src/Core/IHybridWebView.cs

mattleibow

Just doing a quick review of things since they have changed a fair bit. Mostly comments of names and places. I did not get to review everything yet as I have to go sleep, but for now I just got some thoughts and questions.

Was not sure if this was ready for a review since it is in draft, but we are close to net9 RC so...

src/Controls/src/Core/HybridWebView/HybridWebView.cs

mattleibow · 2024-07-10T14:48:38Z

src/Controls/src/Core/HybridWebView/HybridWebView.cs

+		/// </summary>
+		public event EventHandler<HybridWebViewRawMessageReceivedEventArgs>? RawMessageReceived;
+
+		public void SendRawMessage(string rawMessage)


Is there any way that platforms support a "blocking" request where we could have a SendRawMessageAsync so that people can await the call and potentially have code that wait for the JS to finish executing? Or is this all a fire-and-forget messaging system?

My main thought is that if you want to invoke multiple messages, but they need to run in series and not just span and maybe a small delay somewhere will mix the order.

There are several variations of these methods that I'll be adding in subsequent PRs, including async versions, plus method invocation. Some of this is tracked in #22303 and #22304.

You can technically implement this right now manually by sending messages back and forth like a state machine, but it's of course not ideal. I described this PR to another person as M-MVP (Minimum Minimal Viable Product 😁 ).

src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Android.cs

mattleibow · 2024-07-10T15:14:21Z

src/Controls/src/Core/HybridWebView/HybridWebView.cs

+
+		public void SendRawMessage(string rawMessage)
+		{
+			Handler?.Invoke(nameof(IHybridWebView.SendRawMessage), rawMessage);


For future proofing, this should not pass the string directly but instead pass a new record type:

// in src/Core/src/Primitives/SendRawMessageRequest.cs namespace Microsoft.Maui { public record SendRawMessageRequest(string rawMessage); }

If there is any need to return a value - such as a result of the request or some response, then inherit from RetrievePlatformValueRequest<T>:

// in src/Core/src/Primitives/SendRawMessageRequest.cs namespace Microsoft.Maui { public class SendRawMessageRequest(string rawMessage) : RetrievePlatformValueRequest<string> { // base members: // public string Result { get; } // public void SetResult(string result); // public bool TrySetResult(string result); } }

For this PR this is really all we plan to support. But as part of #22303 and #22304 the message pattern will be updated to be more generic and future-proofed.

In the original prototype the pattern was that the messages were encoded as JSON and there was a message type ID that said whether it was raw, method invoke, etc. Not sure what the new design will be but it will be capable of supporting multiple message types.

I mean that for the maui codebase, we want to be consistent and use a wrapper for commands so people can cast instead of each command being its parameter data type.

Discussed in the mtg; something like this will definitely happen but I'd rather do it once I add another message type (such as to invoke methods). That way I'll have a clearer sense of the design.

mattleibow · 2024-07-10T15:24:56Z

src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Android.cs

+		private Stream? PlatformOpenAppPackageFile(string filename)
+		{
+			filename = PathUtils.NormalizePath(filename);
+
+			try
+			{
+				return _handler.Context.Assets?.Open(filename);
+			}
+			catch (Java.IO.FileNotFoundException)
+			{
+				return null;
+			}
+		}
+
+		internal static class PathUtils
+		{
+			public static string NormalizePath(string filename) =>
+				filename
+					.Replace('\\', Path.DirectorySeparatorChar)
+					.Replace('/', Path.DirectorySeparatorChar);
+		}


Can this rather use FileSystemPlatformOpenAppPackageFile instead of duplicating code?

The MAUI FileSystem APIs are unfortunately async-only (normally a good thing), but the Android API being implemented here is sync-only. For that reason I did the call directly because ultimately the low-level file system API on Android is sync anyway (just regular file system call). I have been unable to find a pattern to do async interception of Android WebView requests.

Can we create an issue to track this, we already have FileSystemUtils.NormalizePath so we probably should create a helper for this and use it everywhere vs copying in all places.

Filed #23668.

src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Tizen.cs

Fixes #22302

Eilon · 2024-07-11T23:25:34Z

@mattleibow - thank you for the feedback, I think I've addressed or responded to each item. The PR should be ready for final review. I just rebased to net9 so that could bring up some new issues, but hopefully nothing too shocking.

Eilon · 2024-07-12T20:17:33Z

@mattleibow / @Redth / @tj-devel709 - this PR is good to go from my perspective as an initial step. Future PRs should theoretically be smaller because they'll just be individual sub-features (invoking C#/JS methods, debug support, etc.).

It's important we get this into the next preview train, so if you have any feedback, please let me know (especially if it's urgent for this PR to go in).

Eilon · 2024-07-16T02:18:07Z

eng/devices/windows.cake

@@ -205,7 +205,7 @@ Task("Test")
 	.IsDependentOn("SetupTestPaths")
 	.Does(() =>
 {
-	var waitForResultTimeoutInSeconds = 120;
+	var waitForResultTimeoutInSeconds = 240;


On CI the tests were failing due to timeout, so I doubled it.

Eilon · 2024-07-16T02:18:34Z

@mattleibow / @Redth / @tj-devel709 - how can I help make this code review easiest so that it can go in before the next preview locks down?

There are only a few 'moving' parts to this:

The control itself, with per-platform logic. This is not very new code; it's largely 'inspired' by the regular WebView, BlazorWebView, and portions of my prototype HybridWebView.
- It has logic to 'boot itself up' - that is, initialize the WebView, when it's ready
- It has logic to serve static files (HTML/JS/JPG/etc.) from Raw Resources (this code is almost identical to BlazorWebView)
- Send messages between JS and C#
The new device test. It's largely inspired by how WebView tests are written, but changed to do HybridWebView stuff
The Controls Sample was also updated to have a page to demo it
A trillion Public API TXT files were updated 😁

PureWeen · 2024-07-16T16:29:55Z

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

+				else
+				{
+					eventArgs.Response = sender.Environment!.CreateWebResourceResponse(
+						Content: await CopyContentToRandomAccessStreamAsync(contentStream),


Should we try catch any of this? Or use our FireAndForget and move this to a separate method?

This is essentially copied from BlazorWebView so it's fairly tried-and-true. There's a fair bit of 'error' checking at each level, and there have been no reports of problems with the code (except now that I've jinxed it!).

Eilon · 2024-07-18T02:39:57Z

@mattleibow / @PureWeen / @Redth / @tj-devel709 - alright the CI is green and I believe I've addressed all feedback. Thank you for the review the other day; I think the discussion put HybridWebView in a better place!

mattleibow · 2024-07-18T16:56:55Z

src/Core/src/Handlers/HybridWebView/IHybridWebViewHandler.cs

+		string? DefaultFile { get; set; }
+		string? HybridRoot { get; set; }


The properties should be removed since this can be obtained from the VirtualView directly.

Eilon added do-not-merge Don't merge this PR area-controls-hybridwebview HybridWebView control labels Jun 6, 2024

Eilon added this to the 9.0-preview6 milestone Jun 6, 2024

jsuarezruiz reviewed Jun 10, 2024

View reviewed changes

Redth reviewed Jun 13, 2024

View reviewed changes

src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/index.html Outdated Show resolved Hide resolved

mattleibow reviewed Jun 14, 2024

View reviewed changes

src/Controls/src/Core/HybridWebView/HybridWebView.cs Outdated Show resolved Hide resolved

src/Core/src/Core/IHybridWebView.cs Outdated Show resolved Hide resolved

Eilon force-pushed the eilon/hybridwebview branch from 1dd1bcf to e4ce427 Compare June 19, 2024 18:21

Eilon mentioned this pull request Jun 19, 2024

HybridWebView ArgumentNullException when using HtmlWebViewSource instead of file Eilon/MauiHybridWebView#68

Closed

Eilon force-pushed the eilon/hybridwebview branch from e12fdd9 to 59907af Compare July 9, 2024 18:03

Eilon changed the title ~~WIP: HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app~~ HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app Jul 10, 2024

mattleibow reviewed Jul 10, 2024

View reviewed changes

Eilon force-pushed the eilon/hybridwebview branch from 7fe7393 to 2929e41 Compare July 11, 2024 22:21

Eilon marked this pull request as ready for review July 11, 2024 22:22

Eilon requested a review from a team as a code owner July 11, 2024 22:22

Eilon requested review from PureWeen and jsuarezruiz July 11, 2024 22:22

Initial HybridWebView control to send messages between C# and .NET

c4d65c5

Fixes #22302

Eilon force-pushed the eilon/hybridwebview branch from 2929e41 to c4d65c5 Compare July 11, 2024 23:24

Eilon requested a review from a team as a code owner July 11, 2024 23:24

Eilon changed the base branch from main to net9.0 July 11, 2024 23:24

Eilon modified the milestones: 9.0-preview6, 9.0-preview7 Jul 11, 2024

Eilon added 2 commits July 11, 2024 21:17

Update MauiHybridWebView.cs

d21a331

Increase timeout for unpackaged test results

df6a7bf

Eilon removed the do-not-merge Don't merge this PR label Jul 15, 2024

Merge branch 'net9.0' into eilon/hybridwebview

e14563b

Eilon commented Jul 16, 2024

View reviewed changes

PureWeen reviewed Jul 16, 2024

View reviewed changes

Eilon added 5 commits July 16, 2024 13:22

Code review feedback; change to wwwroot; add memory leak test

1ebbd71

Memory stuff

87d679c

Fix actual memory leak!

9ab3ea6

Use WeakRef for iOS/Mac

5f04859

iOS/Mac WeakRef

14104af

This was referenced Jul 17, 2024

HybridWebView configuration to enable F12/browser dev tools #23663

Closed

HybridWebView: Clean up duplicate path manipulization/normalization code #23668

Open

Eilon enabled auto-merge (squash) July 18, 2024 02:39

mattleibow reviewed Jul 18, 2024

View reviewed changes

mattleibow approved these changes Jul 18, 2024

View reviewed changes

Eilon merged commit cf76a62 into net9.0 Jul 18, 2024
112 checks passed

Eilon deleted the eilon/hybridwebview branch July 18, 2024 17:13

This was referenced Jul 18, 2024

HybridWebView core features: static files and simple messages #22302

Closed

HybridWebView: Support controlling F12 browser dev tools #22305

Open

HybridWebView is official in .NET MAUI 9! 🥳 Eilon/MauiHybridWebView#70

Open

hansmbakker mentioned this pull request Jul 30, 2024

HtmlWebViewSource support for upcoming HybridWebView control #23908

Open

samhouts added the fixed-in-net9.0-nightly This may be available in a nightly release! label Aug 2, 2024

davidbritch mentioned this pull request Aug 7, 2024

.NET MAUI 9: HybridWebView dotnet/docs-maui#2404

Closed

jfversluis mentioned this pull request Aug 12, 2024

[Enhancement] (WebView) - Expose C# classes in JS #9424

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app #22880

HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app #22880

Eilon commented Jun 6, 2024 •

edited

Loading

jsuarezruiz left a comment

mattleibow left a comment

mattleibow left a comment

mattleibow Jul 10, 2024

Eilon Jul 11, 2024

mattleibow Jul 10, 2024

Eilon Jul 11, 2024

Eilon Jul 11, 2024

mattleibow Jul 16, 2024 •

edited

Loading

Eilon Jul 16, 2024

mattleibow Jul 10, 2024

Eilon Jul 11, 2024

mattleibow Jul 16, 2024

Eilon Jul 17, 2024

Eilon commented Jul 11, 2024

Eilon commented Jul 12, 2024

Eilon Jul 16, 2024

Eilon commented Jul 16, 2024 •

edited

Loading

PureWeen Jul 16, 2024

Eilon Jul 17, 2024

Eilon commented Jul 18, 2024

mattleibow Jul 18, 2024 •

edited

Loading

mattleibow Jul 18, 2024

		string? DefaultFile { get; set; }
		string? HybridRoot { get; set; }

HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app #22880

HybridWebView control for integrating JS/HTML/CSS easily into a .NET MAUI app #22880

Conversation

Eilon commented Jun 6, 2024 • edited Loading

Description of Change

Issues Fixed

jsuarezruiz left a comment

Choose a reason for hiding this comment

mattleibow left a comment

Choose a reason for hiding this comment

mattleibow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattleibow Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Eilon commented Jul 11, 2024

Eilon commented Jul 12, 2024

Choose a reason for hiding this comment

Eilon commented Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Eilon commented Jul 18, 2024

mattleibow Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Eilon commented Jun 6, 2024 •

edited

Loading

mattleibow Jul 16, 2024 •

edited

Loading

Eilon commented Jul 16, 2024 •

edited

Loading

mattleibow Jul 18, 2024 •

edited

Loading