How do you get WebView to work on WinUI with local web files?

dg2k 1,386 Reputation points
2022-07-17T18:36:35.76+00:00

In an attempt to migrate a published Xamarin app to .NET MAUI, I am finding it difficult for WebView to work with WinUI with WebView Source property set to a local file (as is the case with Xamarin).

Xamarin

  • Android: HTML and CSS files in the default Assets top folder; Files (with AndroidResource Build Action) are accessed with filename prepended with: files:///android_asset/HelpHtml/
  • UWP: HTML and CSS files in app top folder, named HelpHTML in this example; Files (with Contents Build Action) are accessed with filename prepended with: ms-appx-web:///HelpHtml/

.NET MAUI

As per .NET MAUI recommendation, HTML and CSS files are in Resources/Raw/ folder (or subfolder thereof) with MauiAsset Build Action.

  • Android: With HelpHtml subfolder, files are accessed with filename prepended with: files:///android_asset/HelpHtml/. Little did I know that the Resources/Raw/ folder actually maps to files:///android_asset/ which was a result of trial and error and worked as expected!
  • WinUI: Not even sure if setting WebView Source property to a local filename works for WinUI.

Using the Xamarin approach, tried prepending filename with "ms-appx-web:///Resources/Raw/HelpHtml/" and no luck.

On the other hand, setting WebView Source property to a remote URL (e.g. https://microsoft.com) works great!

My question is, how do you get WebView to work on WinUI with a local file in Resources/Raw folder or subfolder?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,927 questions
{count} votes

Accepted answer
  1. Rob Caplan - MSFT 5,422 Reputation points Microsoft Employee
    2022-07-17T19:55:15.083+00:00

    WebView2 enables mapping a virtual host name to a local folder with its SetVirtualHostNametoFolderMapping method.

    You can call that on the underlying WebView2 to allow "https://appdir/foo.html" links to your assets folder

    This will be enabled by default in MAUI apps in SR2 by [Fix for #5523 MauiWebView not loading local files on Windows

    7672](https://github.com/dotnet/maui/pull/7672)


1 additional answer

Sort by: Most helpful
  1. dg2k 1,386 Reputation points
    2022-07-21T14:31:16.32+00:00

    I'm getting somewhere, @Rob Caplan - MSFT .

    I suspected that the Published/Unpublished app base directory may make a difference and putting the following in the *.cproj file did the trick.

      <PropertyGroup Condition="$(TargetFramework.Contains('-windows'))">  
     <AppxPackage>false</AppxPackage>  
     <PublishAppxPackage>false</PublishAppxPackage>  
      </PropertyGroup>  
    

    Now the local files load as expected (also while navigating) but with a minor issue. On start-up, there is a momentary error message as shown below (lasts about a couple of seconds) from which Webview recovers.

    Having got this far, I can live with the minor issues, which hopefully will be ironed out in due course. Automatically taking care of the app base directory for published and unpublished from WebView side would be ideal. I understand this point is already under consideration.
    Thank you again.

    223241-webview.png

    0 comments No comments