如何将Android WebView的HTML、图片、CSS存储到应用缓存文件夹？

Hey there! Let's walk through how to cache your WebView's HTML, images, CSS, and other resources right in your app's cache directory. Here's a step-by-step guide tailored to Android:

First, you need to tweak your WebView's settings to allow caching and point it to your app's cache folder. Here's the key code to set this up:

Kotlin Implementation #

val webView = findViewById<WebView>(R.id.webView)
val webSettings = webView.settings

// Use cached resources first, fall back to network if cache is unavailable
webSettings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK

// Enable JavaScript (required for most modern web content)
webSettings.javaScriptEnabled = true

// Point WebView cache to your app's default cache directory
val cacheDir = applicationContext.cacheDir
webSettings.setAppCachePath(cacheDir.absolutePath)
webSettings.setAppCacheEnabled(true)

Java Implementation #

WebView webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();

// Prioritize cached content, use network as backup
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
webSettings.setJavaScriptEnabled(true);

File cacheDir = getApplicationContext().getCacheDir();
webSettings.setAppCachePath(cacheDir.getAbsolutePath());
webSettings.setAppCacheEnabled(true);

By default, WebView has a modest cache limit. You can expand it to store more resources:

// Set maximum cache size to 50MB (adjust based on your needs)
webSettings.setAppCacheMaxSize(50 * 1024 * 1024)

Ensure full support for caching images and CSS:

// Enable automatic image loading and caching
webSettings.loadsImagesAutomatically = true
// Prioritize rendering to ensure cached CSS applies smoothly
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH)

If your web app uses HTML5 Local Storage (e.g., for user preferences), enable this separately:

webSettings.domStorageEnabled = true
// Optional: Specify a dedicated database path (defaults to app cache if not set)
webSettings.databaseEnabled = true
webSettings.setDatabasePath(cacheDir.absolutePath)

To confirm your resources are being cached properly:

• Check the cache directory: Use Android Studio's Device File Explorer to navigate to data/data/[your-app-package]/cache and look for WebView cache files.
• Test offline loading: Disable your device's internet and reload the WebView. If content loads, caching is working.
• Log cache events (optional): Use WebChromeClient to monitor cache limits:

webView.webChromeClient = object : WebChromeClient() {
    override fun onReachedMaxAppCacheSize(requiredStorage: Long, quota: Long, callback: WebStorage.QuotaUpdater) {
        // Double the cache quota when it's full (adjust as needed)
        callback.updateQuota(requiredStorage * 2)
    }
}

A quick tip: LOAD_CACHE_ELSE_NETWORK uses cached content whenever possible. If you want to respect server-side cache headers (e.g., only use cache when offline), use LOAD_DEFAULT instead.

内容的提问来源于stack exchange，提问作者fresher