To load index.html into a WebView offline, you need to make sure that all resources used in index.html are correctly located in the LocalFolder application. And all this content should be placed in a subfolder under the local folder .
Link Notes in WebView Class :
To download uncompressed and unencrypted content from your LocalFolder or TemporaryFolder applications, use Uri Navigation , which uses ms-appdata strong> . WebView support for this scheme requires placing your content in a subfolder in a local or temporary folder. . This allows you to navigate the URI, for example, ms-appdata: ///local/folder/file.html and ms-appdata: ///temp/folder/file.html. (To download compressed or encrypted files, see NavigateToLocalStreamUri .)
For example, I created a simple index.html that uses index.js in the js folder and index.css in the css folder.
index.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="js/index.js"></script> <link href="css/index.css" rel="stylesheet" /> </head> <body> <button id="myBtn">Click Me!</button> <div id="myDiv"></div> </body> </html>
index.js
window.onload = function () { document.getElementById("myBtn").onclick = function () { document.getElementById("myDiv").innerHTML += "You have clicked once! <br>"; } }
index.css
#myDiv { border: 2px dotted black; width: 500px; height: 500px; }
They are located in my LocalFolder application, for example:
Then, in my UWP application, I used the following code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <WebView x:Name="Browser" /> </Grid>
protected override void OnNavigatedTo(NavigationEventArgs e) { Browser.Navigate(new Uri("ms-appdata:///local/Downloads/index.html")); }
This works well:
Therefore, if your html file does not load, check your LocalFolder application and make sure that your html file and resources are in the right place.
On the local computer, data files are stored in a folder
% USERPROFILE% \ AppData \ Local \ Packages \ {PackageID}
which is usually C: \ Users \ {UserName} \ AppData \ Local \ Packages \ {PackageId} , where {UserName} corresponds to the Windows username and {PackageId} corresponds to the identifier of the Windows Store application package, which can be found as Package family name on the Packaging tab application manifest file. The LocalState folder inside the package folder is LocalFolder.
For Mobile Emulator, we can use some tools like IsoStoreSpy or Windows Phone Power Tools to check LocalFolder.
If you can download the html file, but some resources are missing because the css style is missing, you may need to check your html code and make sure the links are correct.