Playing with the UNO Framework(and thus Xamarin) to see how the Webview reacts on Android and WASM [Part 1]

I had hear a lot of great things about Uno which is built by nventive, I decided to give it a go and see how far I could take it to make my Hybrid UWP application work.

Uno is based on Xamarin

In case you were not aware the Uno Platform is a UWP bridge for iOS, Android, and WebAssembly.

Here is what I am trying to achieve:

• I need to be able to call JavaScript methods from my C# code on Android
• I need to be able to have the JavaScript code in the Webview to be able to call my C# code on Android

What I already have : A simple UWP app that contains a WebView, that can play videos and execute JavaScript commands.

As you can imagine I already know how to do this for a UWP app however for an Xamarin based Android app I had no idea.

Tip: learned the hard way (after 5 blue screens..) that you need to disable hyper-v for the Android virtual machine to work correctly.

Starting off

To start, I created a branch of the https://github.com/nventive/Uno framework on my laptop and because I wanted to keep thing simple I also decided to code directly in the sample app of the the project.

I created a simple class that helps me create a WebView and that can call JavaScript methods (play and pause).

Here are the two JavaScript methods we will be calling:

Play() and Pause() methods on the video player

Because we will be using the same class for our Android app and our UWP app we will need to handling platform divergence & features as follows:

For Android:

#if __ANDROID__
//ANDROID specific code
#endif

and for UWP:

#if __UWP__
//UWP specific code
#endif

As you can guess these conditional compilation will allow us to execute specific code when trying to execute a method for Android or UWP. We will be using the method call CallEvalWebviewMethod for both platforms and thus will need to be able to execute JavaScript for both platforms. The issue is that the method InvokeScriptAsync in the WebView class is executed differently for each of these platforms, for Android you need to add a CancellationToken.

Here is the InvokeScriptAsync that can be found in the Webview.Android.cs, that is located here Path\\\GitHub\Uno\src\Uno.UI\UI\Xaml\Controls\WebView

InvokeScriptAsync in Webview.Android.cs

Here is my CallEvalWebviewMethod method:

This should now allow us to execute play and pause commands to our WebView player. However, I quickly also discovered that I needed to change a setting in the Android WebView, we can do this in the following method OnApplyTemplate:

//this will allow my C# code to call play on my video object without the user having to tap on the webview
_webView.Settings.MediaPlaybackRequiresUserGesture = false;

Now, our video player inside our WebView will play videos without having the user needing to interact with the player for the video to start. This means that if we execute

player.play()

the JavaScript call on the WebView will start playing the video.

Calling C# methods from JavaScript, using AddJavascriptInterface

Our WebView will try to execute a C# method called triggerEvent, this will allow us to know in what state the player is in (playing, paused, loading, etc). triggerEvent is a method that is called from the JavaScript side of the WebView.

After looking into the Xamarin Android code we will need to be enabling JavaScript Bridge JavascriptInterface, here is an example:

xamarin/recipes

We will need to adapt this to our needs, again we will need to edit Webview.Android.cs file which is stored here Path\\\GitHub\Uno\src\Uno.UI\UI\Xaml\Controls\WebView

And we will be adding our JavascriptBridge Class which will allow us to handle the triggerEvent method call.

JavascriptBridge Class

Now that we have our class we need to add it to our WebView as follows:

Now with our simple XAML App, we can execute the same XAML code on Android or on UWP which is pretty cool!

Here is our XAML Shared code:

XAML Shared code

What it looks like on UWP, as you will quickly guess I did not go for awesome designs:

What it looks like on Android

We have more or less the same design for each platform, which seems pretty awesome to be able to execute the same XAML on UWP and Android!

In the next article we will be going over a more complex design application, that could for example have a WebView and an adaptive GridView which would allow us to list videos and the click on one to arrive to another page.