Why the static resources listed in HTML5 cache manifest are downloaded twice?

Question

I listed static resources (CSS and javascript files) referenced by the HTML in the explicit cache section of the cache manifest, as a modern mobile web app usually does. But it is surprising to find in chrome that these static resources are downloaded twice for the first time accessing the web app when there is not any local cache yet, since the cache is used to minimize bandwidth. I think the reasons that they are downloaded twice is that they are referenced in the cache manifest and in the HTML.

Why doesn't the browser share the resource if it is referenced in both places? Is it conforming to the HTML5 standard or a bug in chrome?

Answer 1

I have seen this behavior consistently across nearly every browser (Chrome, IE, and Firefox) when using a cache manifest. As far as I can tell, the resources are indeed downloaded twice because they are referred to in both the cache manifest and the html/css. The initial load is for loading the page itself, and the second load is for loading the appcache.

Now, even if a second request needs to be performed to load the appcache, the resource should be served from the regular browser cache since the original request probably loaded it into the browser cache. However, all browsers seem to treat appcache loads differently than regular browsing activity and bypass the cache.

As far as HTML5 specs go, the spec suggests that browsers can implement a mechanism to use the existing download, but it is optional:

Fetch the resource, from the origin of the URL manifest URL, with the synchronous flag set and the manual redirect flag set. If this is an upgrade attempt, then use the newest application cache in cache group as an HTTP cache, and honor HTTP caching semantics (such as expiration, ETags, and so forth) with respect to that cache. User agents may also have other caches in place that are also honored.

If the resource in question is already being downloaded for other reasons then the existing download process can sometimes be used for the purposes of this step, as defined by the fetching algorithm.

An example of a resource that might already be being downloaded is a large image on a Web page that is being seen for the first time. The image would get downloaded to satisfy the img element on the page, as well as being listed in the cache manifest. According to the rules for fetching that image only need be downloaded once, and it can be used both for the cache and for the rendered Web page.

source