[Desktop + WASM] Support for SetVirtualHostNameToFolderMapping

[baskren]

Does support for CoreWebView2.SetVirtualHostNameToFolderMapping exist for the Desktop and BrowserWasm targets? If so, can you provide a sample?

I'm trying the following:

MyProject/MyProject.csproj:

<ItemGroup>
    <Content Condition=" $(TargetFramework.Contains('windows'))  OR  $(TargetFramework.Contains('desktop'))   OR  $(TargetFramework.Contains('wasm')) " Include="WebContent/CltInstall.html" />
</ItemGroup>

MyProject/MainPage.csproj:

 private async void OnLoaded(object sender, RoutedEventArgs e)
 {
     await _webView.EnsureCoreWebView2Async();

     _webView.CoreWebView2.SetVirtualHostNameToFolderMapping
     (
         "UnoNativeAssets",
         "WebContent",
         CoreWebView2HostResourceAccessKind.Allow
     );

     _webView.CoreWebView2.Navigate("http://UnoNativeAssets/CltInstall.html");
     
 }

[baskren]

FWIW, below is a workaround for the BrowserWasm target. IMPORTANT does not work from VisualStudio. However, does work when served using dotnet serve in the project's bin/Debug/net9.0-browserwasm/wwwroot folder.

Still no clue WRT Desktop.

How it works

This work around relies on the following:

• if the host page and the iframe are on the same origin (same domain, protocol, and port), then the host can freely set the iframe’s src (or href in some contexts) to any page within that origin.
• By building your web content files as <Content>, they will be from the same origin as your Uno app - the host for iframe that will display your web content.

Implementation

1. Be sure the web content you want to serve to the WebView2 is in the app's package. For example, the following lines of code in your project's .csproj will make all the content of your project's WebContent folder available for WebView2 consumption in iOS, Android, Windows, and BrowserWasm:

  <ItemGroup>

    <Folder Include="WebContent" />

    <BundleResource Include="WebContent/**/*.*">
      <Link>Platforms/iOS/Resources/WebContent/%(RecursiveDir)%(Filename)%(Extension)</Link>
    </BundleResource>
      
    <AndroidAsset Include="WebContent/**/*.*">
        <Link>Platforms/Android/Assets/WebContent/%(RecursiveDir)%(Filename)%(Extension)</Link>
    </AndroidAsset>

    <Content Condition=" $(TargetFramework.Contains('windows'))  OR  $(TargetFramework.Contains('desktop'))   OR  $(TargetFramework.Contains('wasm')) "
             Include="WebContent/**/*.*" />

  </ItemGroup>

In BrowserWasm, this will create a folder, filled with all your web content, named WebContent in your app's package folder. In this example, I'll assume there is a file named index.html in your project's WebContent folder.

2. Identify the package folder from where your app's content will be served.

   a. Get the package folder in JavaScript: NOTE: THIS MAY BREAK IN THE FUTURE. Right now, you can get the package folder from the following javascript:

       function P42_BootstrapBase() {
           return config.environmentVariables.UNO_BOOTSTRAP_APP_BASE;
       }

   IMPORTANT: In order to access the above JavaScript code from your C# code, you'll need to save it in a .js file in your project's Platforms/WebAssembly/WasmScripts folder AND set its BuildAction to EmbeddedResource.

   b. Get the package folder in C#. In your app's C# code, you'll need to create the following partial function to access the above JavaScript:

       [ System.Runtime.InteropServices.JavaScript.JSImport("globalThis.P42_BootstrapBase")]
       public static partial string GetBootstrapBase();

3. Navigate the WebView2's CoreWebView2 to RELATIVE PATH of your content. In your C# code, do the following

    // In this sample, the variable _webView has already been assigned to our WebView2 instance.

    var packageFolder = GetBootstrapBase();
    var page = $"/{packageFolder}/WebContent/index.html";

   _webView.CoreWebView2.Navigate(page);