In the old days, accessing a local website in UWP was relatively easy. Even if you wanted to load your third-party libs. The basic code you required:
Here you defined the Source and some extra events like NavigationStarting or NavigationCompleted for loading your JS or enabling JS interaction with your third-party lib (that you had to add as a reference in your main project).
Loading your third-party lib:
Adding extra code to load additional JS:
And this is the function to execute extra functions from my app:
Now, what are all the changes required for the new WebView2? There are several changes to be considered. The first one is to download the lib Microsoft.UI.Xaml from NuGet in your main project:
Add this lib in your XAML's libs:
And then, you can add your WebView2:
Now comes the tricky parts. The first change is about the Source. With WebView2, we can only load external websites like bing.com or facebook.com. Any local website is going to fail.
The new approach follows creating an asynchronous function that creates a virtual host (it has to be called in the Constructor), where you map your current local website like this:
Every path that you have in your old app looks like this:
must be changed to:
Therefore, if you loaded Bootstrap like this:
Invoke 3rd-party Libs from JS
- Set Use WebView2 WinRT APIs to No.
- Set Use the wv2winrt tool to Yes.
- Edit Include filters and add the following ones: