Mastering WebView Caching: Reduce Network Calls in Hybrid Android Apps

Background

Hybrid Android apps often load JavaScript files (e.g., bridge.js) via WebView. Since these files change infrequently, developers want to cache them after the first load to avoid repeated network requests, saving bandwidth and resources.

WebView Cache Types

WebView provides two main cache mechanisms: the browser‑level HTTP cache defined by standard HTTP headers, and the HTML5 (H5) cache controlled by the web page, such as AppCache, DOM Storage, Local Storage, and Web SQL Database. This article focuses on using AppCache to cache JavaScript files.

Browser‑Level HTTP Cache

How it works

The browser respects HTTP response headers like Cache-Control, Expires, Last-Modified, and ETag. For example, Cache-Control:max-age=315360000 tells the browser to reuse the cached file for ten years, while Expires sets an absolute expiration date. When a cached file becomes stale, the browser sends conditional requests using If-Modified-Since (based on Last-Modified) or If-None-Match (based on ETag) and receives a 304 Not Modified response if the file has not changed.

WebView Cache Modes

Android WebView can be configured with different cache modes:

LOAD_CACHE_ONLY – use only local cache, no network.

LOAD_DEFAULT – follow HTTP cache headers.

LOAD_NO_CACHE – bypass cache, always fetch from network.

LOAD_CACHE_ELSE_NETWORK – use cache if present, otherwise fetch from network.

Example code to set the default mode:

WebSettings settings = webView.getSettings();
settings.setCacheMode(WebSettings.LOAD_DEFAULT);

In many cases, developers set LOAD_CACHE_ELSE_NETWORK when the JavaScript URL changes with each version, ensuring the cached file is always used.

iOS WebView uses the Expires header for caching and requires per‑request cache control.

Storage Paths on Devices

Cached files are stored in the app’s internal data directory. On Android 4.4 the path is /data/data/<em>package_name</em>/app_webview/cache/. On Android 5.1 it moves to

/data/data/<em>package_name</em>/cache/org.chromium.android_webview/

, while the old app_webview/cache folder remains but no longer holds the browser cache.

Rooted devices reveal the exact locations; screenshots illustrate the directories.

HTML5 (AppCache) Cache

How it works

Adding a manifest attribute to an HTML page enables AppCache. The manifest file lists resources to cache, network‑only resources, and fallback pages. Example manifest:

CACHE MANIFEST
# 2017-05-13 v1.0.0
/bridge.js
NETWORK:
*
FALLBACK:
/404.html

When the page loads, the listed files are cached. Subsequent loads first use the cached resources, then request the manifest; if unchanged, the server returns 304 Not Modified, otherwise a new manifest triggers an update.

AppCache has several pitfalls (e.g., manifest must change to update cache, cached files may be stale, update failures abort the whole process, manifest and page must share the same host, relative paths are resolved against the manifest, and the manifest itself cannot be cached for long).

Enabling AppCache in WebView

WebView does not enable AppCache by default. The following code activates it and sets a storage path:

WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
String cachePath = getApplicationContext().getCacheDir().getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024); // 5 MB

Both setAppCacheEnabled and setAppCachePath must be called; otherwise the AppCache directory will not be created.

AppCache Storage Location

Regardless of the path set, Android stores AppCache files in

/data/data/<em>package_name</em>/app_webview/cache/Application Cache

. This appears consistent across Android 4.4 and 5.1.

Summary

Similarities

Both the built‑in browser cache and AppCache provide file‑level caching, suitable for non‑overwritten JavaScript or CSS updates.

Differences

The browser cache is implemented at the protocol level and cannot be altered by developers; AppCache is controlled by the web page.

Cache directories differ across Android versions for the browser cache, while AppCache always resides in a fixed internal directory.

Browser cache may serve resources without any network request once valid; AppCache always requests the manifest file.

WebView cache behavior can be changed via CacheMode; AppCache behavior is dictated by the manifest.

In practice, both caches often work together: resources not covered by the manifest fall back to the browser cache, and the chosen CacheMode determines how they are retrieved.