How to load a local HTML or PDF file?

With 3D WebView, you can load local HTML and PDF files from the file system using these approaches:

• Load a local file from StreamingAssets
• Load a local file from other locations

Important note: For both of these approaches, if the HTML page links to other local resources (like images, CSS, or JS files), the URL paths used to reference those resources must not begin with a slash, like described here.

Load a local file from StreamingAssets

The easiest way to add local HTML and PDF files to a Unity project is to place them in the project's StreamingAssets folder, like this:

1. Create the following directory in your project: Assets/StreamingAssets
2. Copy your web page resources to the StreamingAssets folder. For example, you could have a folder with the following files:
   • Assets/StreamingAssets/index.html
   • Assets/StreamingAssets/styles.css
   • Assets/StreamingAssets/index.js
3. Tell 3D WebView to load the HTML file in StreamingAssets by passing it a streaming-assets:// URL. For example, to load the file at Assets/StreamingAssets/index.html, you would use the URL streaming-assets://index.html. You can specify the URL by changing the WebViewPrefab's Initial URL field in the editor or by passing it to IWebView.LoadUrl() at runtime, like this:

await webViewPrefab.WaitUntilInitialized();
webViewPrefab.WebView.LoadUrl("streaming-assets://index.html");

For an example of this approach, please see this blog article on creating UIs with HTML.

Important note: streaming-assets:// URLs can only be loaded via the Initial URL field or IWebView.LoadUrl(). Webviews are unable to navigate to a streaming-assets:// URL via a server redirect or JavaScript.

Load a local file from other locations

If you want to load a local file from a different location, you can use a file:// URL instead. For example, here's how you could load a file from Application.persistentDataPath:

await webViewPrefab.WaitUntilInitialized();
var filePath = $"{Application.persistentDataPath}/myfile.html";
// Spaces in URLs must be escaped
var fileUrl = "file://" + filePath.Replace(" ", "%20");
webViewPrefab.WebView.LoadUrl(fileUrl);

All 3D WebView packages support loading files from StreamingAssets, but on sandboxed platforms like Android, iOS, and UWP, the browser engines disallow loading web pages from some directories. So, if you find that the browser is failing to load your file URL, you can use remote debugging and view the application logs to check if the browser is blocking the local file from being loaded.

Linking to local resources (e.g. images, JS, CSS)

For both streaming-assets:// and file:// URLs, if the HTML page links to other local assets such as images, CSS, or JS files, it's important to link to those assets using relative paths that don't begin with a slash, because prefixing the path with a slash makes it relative to the root of the file system. Here are some examples of valid relative paths:

<!-- For files located in the same folder as the HTML file, no prefix is needed. -->
<img src="my-image.png">
<!-- Prefixing with "./" is also equivalent to having no prefix. -->
<img src="./my-image.png">

<!-- You can also specify a folder that's in the same directory as the HTML file.  -->
<link rel="stylesheet" href="resources/styles.css">

<!--
  To reference a file that's not in the same directory as the HTML file, use "../" to reference the parent directory.
  Note: This approach doesn't work for 3D WebView for Android with Gecko Engine because it requires resources to be in the
  same directory as the HTML file.
-->
<script src="../scripts/script.js"></script>

Here's an example that won't work correctly because its path that starts with a slash:

<!-- Error: this image won't load! Since it begins with a slash, it points to the root of the file system (e.g. C:\my-image.png) -->
<img src="/my-image.png">