Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't use WebView with local files stored as MauiAssets on Windows #16646

Closed
vividos opened this issue Aug 9, 2023 · 8 comments · Fixed by #16930
Closed

Can't use WebView with local files stored as MauiAssets on Windows #16646

vividos opened this issue Aug 9, 2023 · 8 comments · Fixed by #16930
Labels
area-controls-webview WebView fixed-in-8.0.6 Look for this fix in 8.0.6 SR1! platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone
.NET 8 SR1

Comments

@vividos
Copy link
Contributor

vividos commented Aug 9, 2023 •
edited by samhouts
Loading

Description

I'm using a WebView in a MAUI content page and want to reference local files. From #7672 I gather that on Windows I can use the https://appdir/ URL and the Windows WebView handler sets up a virtual folder mapping so that I can reference local files that are marked with MauiAsset. I have two similar problems here:

  1. When using an HtmlWebViewSource, the BaseUrl is set to the URL but the image can't be referenced:
Source = new HtmlWebViewSource
{
    Html = "<html><body><h1>Hello World!</h1>" +
            "<img src='dotnet_bot.png' />" +
            "</body></html>",
    BaseUrl = "https://appdir/",
};

The image file is placed correctly in the app's layout folder at build.

  1. When using a UrlWebViewSource, the Windows WebView first shows an error "Hmmm… can't reach this page", then after a few seconds, reloads the page and everything works:
Source = new UrlWebViewSource
{
    Url = "https://appdir/info.html",
};

Both bugs makes it hard to show WebView content that references local asset files.

I didn't test the other platforms, as they need a different BaseUrl or Url, and the handler doesn't need to set up a virtual host name to folder mapping.

I have the feeling that calling WebView2's SetVirtualHostNameToFolderMapping() is missing at some spot. I have written a UWP Xamarin.Forms renderer that also provides platform WebView2 for Xamarin.Forms.WebView and there it works without a problem.

Steps to Reproduce

I prepared a sample app, and it's the easiest to use this:

  1. Clone the https://github.com/vividos/SampleProjects/ repository and open the app contained in the subfolder WebViewLocalFilesMauiApp
  2. Open the MainPage.xaml.cs and find that the second problem case is uncommented.
  3. Run the Windows app and see the problem number 2
  4. Change MainPage.xaml.cs to use the HtmlWebViewSource instead of UrlWebViewSource to reproduce the first problem
  5. Switch back to use UrlWebViewSource and remove the return; statement in WebView_HandlerChanged
  6. See that the workaround with manual setting up the virtual host name to folder mapping works

Link to public reproduction project repository

https://github.com/vividos/SampleProjects/

Version with bug

7.0.86

Is this a regression from previous behavior? In other words, did this work before an update and now does not?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 10.0.19041

Did you find any workaround?

See steps 5 and 6 above, but it's a workaround only for the specific URL.

Relevant log output

No response
@vividos vividos added the t/bug Something isn't working label Aug 9, 2023
@PureWeen PureWeen added platform/windows 🪟 legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor area-controls-webview WebView labels Aug 9, 2023
@PureWeen PureWeen added this to the Backlog milestone Aug 9, 2023
@ghost
Copy link

ghost commented Aug 9, 2023

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

@vividos
Copy link
Contributor Author

vividos commented Aug 10, 2023

@PureWeen I'd like to look at this issue and figure out a fix. Is there a manual or a list of directions to follow in order to set up development using the dotnet maui git repository? Thank you!

@mattleibow
Copy link
Member

mattleibow commented Aug 10, 2023 •
edited
Loading

There is a doc: https://github.com/dotnet/maui/blob/main/.github/DEVELOPMENT.md

Typically my dev path is:

  1. Clone repo
  2. Restore any tools: 
    dotnet tool restore
  3. Build the tasks used by the IDE: 
    dotnet build ./Microsoft.Maui.BuildTasks.slnf
  4. Open the Microsoft.Maui-dev.sln solution

But, if you have any issues, read the doc and see if there is an extra step you need to do to set up any pre-reqs.

@vividos
Copy link
Contributor Author

vividos commented Aug 21, 2023

I was able to verify the bugs using the Controls.Sample.Sandbox project as well, which is a nice empty project to reproduce these kind of bugs.

First problem:
When using an HtmlWebViewSource and setting a BaseUrl, the code in MauiWebView.LoadHtml() uses an internal WebView2 to insert the base URL as an HTML bse tag. When the internal web view produces the new htmlWithBaseTag, this is set as new HTML content using NavigateToString(), which in turn triggers the NavigationStarting event of MauiWebView. This event gets the new HTML content, but as data: URL, base64 encoded, and this finally results in CoreWebView2.ClearVirtualHostNameToFolderMapping() being called. Then the local links can't be resolved correctly.

As a workaround, I can remove the BaseUrl from the HtmlWebViewSource and add the <base> HTML tag to my initial HTML content instead. This won't work if the initial HTML content has relative paths to their images and script and they don't lie directly in the app's root folder.

The real fix would be to recongize the re-loading of the HTML code and instead call CoreWebView2.SetVirtualHostNameToFolderMapping(). Actually, the best solution would be that WebView2 would have a NavigateToString() method with baseUrl parameter, but it's outside the scope of MAUI development.

Second problem:
When using a UrlWebViewSource, the code in MauiWebView.LoadUrl() only sets up the virtual host name mapping if the Uri passed is a relative one. Full URLs such as "https://appdir/info.html" don't get the treatment. The situation could be improved in checking if the passed URL also starts the the local scheme and also set up the virtual host name mapping.

As a workaround, I can pass a relative URL and then it just works.

I will create a PR with two changes that should fix both problems.

@XamlTest XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Aug 22, 2023
@XamlTest
Copy link

XamlTest commented Aug 22, 2023 •
edited
Loading

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Windows 11 .NET 8 with below Project:
WebViewLocalFilesMauiApp.zip

First issue(Windows): The image can't be referenced.
image
Second issue(Windows): WebView first shows an error "Hmmm… can't reach this page", then after a few seconds, reloads the page and everything works.
image
iOS: Nothing is displayed.
image
Android: Nothing is displayed.
image

@vividos
Copy link
Contributor Author

vividos commented Aug 22, 2023

Just a note, the sample project does not work in Android and iOS, since it would require different base urls, but these two platforms are out of scope for this issue anyway.

@vividos vividos mentioned this issue Aug 22, 2023
Merged
@samhouts samhouts modified the milestones: Backlog, Under Consideration Aug 29, 2023
vividos added a commit to vividos/WhereToFly that referenced this issue Sep 16, 2023
@vividos
working around some bugs in the MAUI WebView implementation, failing …
1c068e9 
…to correctly setting the BaseUrl for an HtmlWebViewSource

see also:
dotnet/maui#16646
dotnet/maui#16930
@lukasrut
Copy link

lukasrut commented Dec 4, 2023

Hello, I have the same issue with displaying images in html on android (image can't be referenced). Is here some progress? Thanks!

@vividos
Copy link
Contributor Author

vividos commented Dec 4, 2023

@lukasrut this issue is only for the Windows WebView2, so it's probably best if you open a new issue for your specific problem

@github-actions github-actions bot locked and limited conversation to collaborators Jan 6, 2024
@samhouts samhouts added the fixed-in-8.0.6 Look for this fix in 8.0.6 SR1! label Jan 31, 2024
@samhouts samhouts modified the milestones: Under Consideration, .NET 8 SR1 Jan 31, 2024
@Eilon Eilon removed the legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor label May 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area-controls-webview WebView fixed-in-8.0.6 Look for this fix in 8.0.6 SR1! platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Milestone
.NET 8 SR1
Development

Successfully merging a pull request may close this issue.

fix using local asset files on windows
7 participants
@Eilon @vividos @mattleibow @PureWeen @samhouts @lukasrut @XamlTest