WebView Caching in Android: 30% Faster Loading

Sep 13, 2024

Overview

WebView provides flexibility for displaying web content within native apps, but they can suffer from loading issues, particularly with poor network connectivity. This article examines a solution to these problems through the implementation of local caching for WebView resources. By storing HTML, CSS, and JavaScript files locally, significant reductions in load times and improvements in user experience were achieved.

Problem

Our WebView were experiencing long load times, adversely affecting conversion rates, especially in conditions of low internet connectivity. 

To address these issues, the goal was to enhance conversion rates and reduce drop-off trends due to WebView loading delays.

Solution

After extensive discussion on optimizing metrics, the team determined that caching was the most effective solution. This approach involved downloading HTML, CSS, and JavaScript files and serving them locally. We discovered that the WebView component provides a callback method, shouldInterceptRequest, which is triggered for every request made by the WebView. By overriding this method, they could return local files instead of fetching them from the server.

override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest?): WebResourceResponse? {
      return super.shouldInterceptRequest(view, request)
}

And can return our local cache files as providing the file mimeType and the file input stream

WebResourceResponse( mimeType, encoding, fileInputStream)

However, a new challenge emerged: the web application, built with Next.js, loads JavaScript files in chunks that can change with each deployment. To address this, made an endpoint that automatically updates the file urls with each deployment and includes version for managing file updates.

Overview

The approach involves:

1. Fetching cache URLs from a backend service.
2. Downloading the cache files and saving them locally.
3. Retrieving and serving cached files in a WebView.

Files were downloaded in the background during app launch using DownloadManager, which efficiently handles issues like failures and retries.

Created a manager class CacheManager (Single Source of truth) for webview caching handling. This manager handles everything from downloading the files to providing files to webview.

Let’s dive into the technical details of the CacheManager class, which is designed to handle the caching logic, and how it integrates with the WebView to serve cached content.

We made it singleton and injected in our activity and as soon as app start we fetches the api and the backend response provides URLs for cache files and HTML files. Here’s an example response:

A

We store the version in prefs and if version mismatches we flush the old files and download the new files.

Result

Now after all the hard work, time for internal testing and the results were crazy 🥹

And Boom💥 
After deploying the changes, conversion rates saw significant improvements within just one day of going live.

Conclusion

Efficient WebView caching improves user experience by reducing load times and providing offline access to previously loaded content. The `CacheManager` class, combined with WebView’s request interception, offers a robust solution for managing cache files in Android applications.

By implementing this approach, you can ensure that your app remains responsive and user-friendly, even in scenarios with limited or no internet connectivity.

By following this guide, you can enhance your app’s performance and provide a seamless experience to your users.

Rohit Yadav