Xamarin Forms WebView control in UWP app can't load url but Edge browser and Android app can

Question

I have a C# Xamarin Forms app that has a very simple Xaml page that contains a WebView control that won't render an HTML page I created when I run it as a UWP app. A previous version of this HTML page worked fine in the UWP version but I added some async JavaScript code and perhaps some other problematic JavaScript and now I just get a blank page in Xamarin Forms UWP app and nothing renders. This same HTML page works fine in the Edge browser and when running as an Android app running in the Android Emulator so it appears to be an issue with the WebView control in UWP with the specific HTML I have included below. I have Internet and Microphone capabilities turned on in the UWP manifest.

I am testing this in Visual Studio 2019 using Xamarin Forms 4.7.0.968 and Xamarin Essentials 1.5.3.2 and Microsoft.NETCore.Universal 6.2.10.

[Update: followed tip on debugging and now see an error][There is no errors or exceptions thrown so I can't tell what the issue is. Anyone have any ideas on why the HTML page below won't render in UWP app or what I can do to debug... I wish I had something like the F12 tools in the browser so I could tell what is going wrong.]

After following the tip on debugging from (Nico Zhu - MSFT), here is the error I saw which points to line with the argument to the call to createDirectLineSpeechAdapters(). Apparently, the UWP WebView is not happy with passing that async() function as a parameter to createDirectLineSpeechAdapters():

Both the Edge browser and the WebView control in the Android version of this app work fine so I am trying to understand why this is a problem for the UWP implementation of WebView.

Here is the HTML code that won't render with the XAML following it:

<!DOCTYPE html>
<html>
<head>
    <script crossorigin="anonymous"
            src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <script>
        (async function () {
            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: {
                                language: window.navigator.language
                            }
                        }
                    });
                }
                return next(action);
            });

            const settings = {
                locale: 'en-us',
                store,
                userID: 'MyUId'
            };

            let adapters = null;

            const fetchCredentials = async () => {
                const region = 'eastus';
                const response = await fetch(`https://${region}.api.cognitive.microsoft.com/sts/v1.0/issuetoken`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
                        'Ocp-Apim-Subscription-Key': '<my key>'
                    }
                });

                if (!response.ok) {
                    throw new Error('Failed to fetch authorization token.');
                }

                const authorizationToken = await response.text();
                return { authorizationToken, region };
            };

            adapters = await window.WebChat.createDirectLineSpeechAdapters({
                fetchCredentials
            });

            window.WebChat.renderWebChat(
                {
                    ...adapters,
                    ...settings
                },
                document.getElementById('webchat'));

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));
    </script>

</body>
</html>

Here is the XAML that shows how the WebView looks:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core"
             mc:Ignorable="d"
             x:Class="Fasst.MainPage">

    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Button Text="Assistant" Clicked="AssistantButton_Clicked" />
            <Button Text="Map" Clicked="MapButton_Clicked" />
        </StackLayout>
        <BoxView x:Name="mapPane" IsVisible="false" Color="Blue" />
        <!-- Place new controls here -->
        <WebView x:Name="assistantPane" Source="https://fasstassistant-rhw.azurewebsites.net/Index" windows:WebView.IsJavaScriptAlertEnabled="true"/>
    </StackLayout>

</ContentPage>

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-06-22T08:39:48

. I wish I had something like the F12 tools in the browser so I could tell what is going wrong.

For debugging WebView control in UWP app, you could refer this document.

We need to use the DOM Explorer to inspect and debug a WebView control, and you could also use Microsoft Edge DevTools Preview to test this UWP webView control. For my testing html page throw issuetoken access denied.

Xamarin Forms WebView control in UWP app can't load url but Edge browser and Android app can

1 Answers