Why Updated Web Resources Still Appear Old? Unraveling HTML5 & WebView Caching
This article explains why updated web assets like images, JS, or CSS may still show old versions in browsers and hybrid apps, covering HTTP protocol caching, HTML5 application cache, cache‑busting techniques, and platform‑specific WebView cache handling for Android and iOS.
Introduction
When a web project updates a resource that has been cached for a long time, browsers often still display the old version. This article explores the reasons behind this behavior and shows how to force cache updates in both standard web pages and hybrid mobile apps.
1. Protocol Cache
HTTP caching relies on response headers such as Cache-Control , Expires , Last-Modified , and Etag to control how long a resource is stored locally.
Cache-Control : e.g., Cache-Control: max-age=600 keeps the file for 600 seconds before the browser must revalidate.
Last-Modified : the server’s last modification time; browsers send If-Modified-Since and receive 304 Not Modified if unchanged.
Expires provides an absolute expiration date (HTTP/1.0). When both Cache-Control and Expires appear, Cache-Control takes precedence. Etag works like a fingerprint; browsers send If-None-Match and receive 304 or 200 accordingly.
Two special refresh cases:
Manual refresh (F5) : forces a revalidation with Cache-Control: max-age=0.
Force refresh (Ctrl+F5) : bypasses local cache using Cache-Control: no-cache (or Pragma: no-cache).
To update a resource quickly, you can:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");Or modify the HTML <head> to include cache‑busting meta tags, or append random query strings to URLs, e.g.:
<img src="./data/avatar.jpg?rand=h9xqeI" width="156" height="98"><script src="UILib/Common/Common.js?time=new Date()"></script>2. Application Cache
HTML5 provides an offline application cache using a manifest file that lists resources to be cached. Example:
<!DOCTYPE HTML>
<html manifest="calender.manifest">
<head>
<title>calender</title>
<script src="calender.js"></script>
<link rel="stylesheet" href="calender.css">
</head>
<body>
<p>The time is: <output id="calender"></output></p>
</body>
</html>CACHE MANIFEST
calender.html
calender.css
calender.jsThe manifest follows a simple syntax: the first line must be CACHE MANIFEST, followed by resource lists, optional NETWORK:, CACHE:, and FALLBACK: sections, with comments starting with #.
Updating an application cache can be done automatically (when the manifest file itself changes) or manually via the window.applicationCache API:
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.update();
}If the app also uses local storage (DOM Storage, WebSQL, IndexedDB), clearing the cache may require restarting the app to purge in‑memory copies.
3. Mobile App Support for HTML5 Caching
Hybrid apps embed HTML5 pages inside a WebView . The caching behavior depends on the platform.
Android
WebView stores cached files under webviewCache.db and a webviewCache folder. Cache modes include:
LOAD_CACHE_ONLY : use only local cache.
LOAD_DEFAULT : respect Cache-Control headers.
LOAD_NO_CACHE : bypass cache, always fetch from network.
LOAD_CACHE_ELSE_NETWORK : use cache if present, otherwise network.
Application cache can be enabled with setAppCacheEnabled(true) and its storage path set via setAppCachePath(). Deleting the folder clears the cache.
iOS
UIWebView does not support HTML5 application cache, but protocol caching can be controlled with NSURLCache and various NSURLRequestCachePolicy values such as NSURLRequestUseProtocolCachePolicy, NSURLRequestReloadIgnoringCacheData, and NSURLRequestReturnCacheDataDontLoad. Cached files are stored under the app’s Library/Caches directory.
4. Conclusion
HTML5 caching consists of HTTP protocol caching, application cache, and client‑side storage (DOM Storage, WebSQL, IndexedDB). Each requires specific strategies for updating or clearing cached data. Hybrid mobile apps inherit these mechanisms through their WebView implementations, so developers must choose appropriate cache‑busting techniques for each platform.
References
HTML Living Standard
HTML5 Storage Wars – localStorage vs. IndexedDB vs. Web SQL
Using HTML5 to Build Offline Applications
Android WebView Cache Mechanism Summary
iOS: Discussing UIWebView Cache
NSURLRequestCachePolicy – iOS Caching Strategies
H5 Cache Mechanism Overview – Mobile Web Performance Optimization
About iOS Cache Deletion
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.