Loading Local HTML files in Compose Multiplatform WebView

Kevin Zou
3 min readNov 8, 2023

--

In mobile application development, displaying web pages in a WebView is an essential part. To meet the demand of developers using WebView to display web pages on multiple platforms, we have developed a Compose Multiplatform WebView library. This library seamlessly runs on Android, iOS, and Desktop, providing rich features and excellent performance. You can refer to this article for an introduction. Recently, we released a new version, 1.6.0, which brings a series of useful updates and improvements, including enhanced support for loading local HTML files and flexible log severity customization.

Local HTML Support

In version 1.6.0, we introduced a brand new feature — enhanced support for loading local HTML files. Now, developers can directly load local HTML files without the need for network requests to fetch remote web pages. This is particularly useful for offline displays or cases that require special handling of HTML content.

To utilize this feature, developers should first place the HTML file in the commonMain/resources/assetsfolder.

Then, developers can create the webviewState by using the rememberWebViewStateWithHTMLFile :

val webViewState = rememberWebViewStateWithHTMLFile(
fileName = "index.html",
)

The fileName should be the relative path to the commonMain/resources/assetsfolder.

External Links

Furthermore, we also provide comprehensive support for external JavaScript (JS) and CSS links. Developers can now reference external JS and CSS files within local HTML files, enabling richer page styles and interactions. For instance, adding the following code to an HTML file:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

This allows the page to automatically load and apply the referenced external resources. Through this functionality, developers can easily achieve interaction and style customization with web pages.

Log Severity Customization

Apart from the support for loading local HTML, we have also added log severity customization in version 1.6.0.

Previously, we used to display all log information, which resulted in printing out some irrelevant test details. This made the developers’ logs very cluttered. Therefore, in the new version, we have decided to hide these test details by default and allow developers to customize the severity level of logs to view testing information.

Now, developers can simply set log severity to debug to view all log information during testing. This is helpful for problem identification and code debugging. Developers can use the following code to set the log severity level:

webViewState.webSettings.apply {
logSeverity = KLogSeverity.Debug
}

Summary

The 1.6.0 release of the Compose Multiplatform WebView library brings comprehensive upgrades with enhanced support for loading local HTML and log severity customization.

With the new feature of loading local HTML files, developers can directly load HTML files from local storage, along with support for external JS and CSS file references. This provides greater flexibility and convenience for offline display and special handling. Additionally, developers can now customize the log severity level to view all log information during testing.

We believe that these new features will further enhance developer productivity and user experience. We will continue to improve and optimize this Compose Multiplatform WebView library, providing developers with powerful functionality and an enhanced user experience.

Following Readings

--

--

Kevin Zou

Android Developer in NetEase. Focusing on Kotlin Multiplatform and Compose Multiplatform