BestHub
search
Sign in
Frontend Development 14 min read

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.

Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Why Updated Web Resources Still Appear Old? Unraveling HTML5 & WebView Caching

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:

<code>header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");</code>

Or modify the HTML

&lt;head&gt;

to include cache‑busting meta tags, or append random query strings to URLs, e.g.:

<code>&lt;img src="./data/avatar.jpg?rand=h9xqeI" width="156" height="98"&gt;</code>
<code>&lt;script src="UILib/Common/Common.js?time=new Date()"&gt;&lt;/script&gt;</code>

2. Application Cache

HTML5 provides an offline application cache using a manifest file that lists resources to be cached. Example:

<code>&lt;!DOCTYPE HTML&gt;
&lt;html manifest="calender.manifest"&gt;
  &lt;head&gt;
    &lt;title&gt;calender&lt;/title&gt;
    &lt;script src="calender.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="calender.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;The time is: &lt;output id="calender"&gt;&lt;/output&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</code>
<code>CACHE MANIFEST
calender.html
calender.css
calender.js</code>

The 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:

<code>if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  window.applicationCache.update();
}</code>

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

frontendwebviewcache controlweb cachingHTML5
Tencent IMWeb Frontend Team
Written by

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.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.

Sign in to comment