Chrome not updating CSS file for offline-enabled HTML5 website

Question

I have an offline-enabled website that uses a cache manifest. I'm finding with Chrome that it is serving an older version of my stylesheet, even if I do a "Empty Cache and Hard Reload"

If I append ?foo=bar to the URL of the page or the CSS, the new version of the CSS is delivered.

My manifest is dynamically generated at /Manifest/Index (e.g. )

If I open the page in Chrome and check out Fiddler, I see a single request is made to the web server, as expected:

#   Result  Protocol    Host    URL Body    Caching Content-Type    Process Comments    Custom  
6   200 HTTP    10.6.4.67   /Manifest/Index 2,476   no-cache  Expires: -1   text/cache-manifest; charset=utf-8  chrome:5484

Here is the header detail for /Manifest/Index

GET /Manifest/Index HTTP/1.1
Host: 10.6.4.67
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) 
Chrome/23.0.1271.97 Safari/537.11
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
HTTP/1.1 200 OK
Date: Thu, 10 Jan 2013 17:59:42 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 4.0
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Content-Type: text/cache-manifest; charset=utf-8
Content-Length: 2476

Can anyone tell me why on earth a CSS file reference in this cache-manifest isn't updating unless I append a cache-busting querystring variable to the CSS? Especially even if I empty Chrome's cache??!

More info:

If I update the cache-manifest, I can open up Chrome's console and see the App Cache events fire:

Document was loaded from Application Cache with manifest /Manifest/Index

Application Cache Checking event

Application Cache Downloading event

Application Cache Progress event (0 of 61) http://x.x.x.x/Content/themes/base/jquery.ui.progressbar.css

Application Cache Progress event (1 of 61) http://x.x.x.x/Content/themes/base/jquery.ui.accordion.css

Snip

Application Cache Progress event (54 of 61) http://x.x.x.x/Content/Site.css

I do notice that some of the items in this list, like Site.css, are underlined. Why is that?

Thanks,

Chris

Here are the headers for the CSS file : HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Thu, 10 Jan 2013 19:49:40 GMT X-AspNet-Version: 4.0.30319 Cache-Control: public ETag: "1CDEF6B7198F080" Content-Type: text/css Content-Length: 2365 Connection: Close — Mister Epic

mattdlockyer mattdlockyer · Accepted Answer · 2013-02-05T04:56:05

Clear your appcache in Chrome using: chrome://appcache-internals/ and remove it there.

Also you need to rebuild your manifest file each time you change the files contained in it for the new copied to be downloaded.

This is accomplished by using a random number in your manifest and generating it when files are edited.

For example in node.js

function generateCacheManifest(...) {
    manifest = 'CACHE MANIFEST';
    manifest += '#version ' + Math.random();
    ...
}

Yes the random number can be in a comment. The point is that Chrome will check the cache manifest and when it sees that nothing has changed it will not fetch the updated files.

Change a file, change your manifest, it's that simple.

Chrome not updating CSS file for offline-enabled HTML5 website

1 Answers