http cache and fingerprinting usage

Question

I am trying to understand how http cache and fingerprinting works. I've setup my express server to cache assets forever like this:

 router.use('/public', 
        express.static(path.join(__dirname, '..', 'public'), 
        { maxAge: 864000000 }));

I am expecting this to cache assets forever, even if i change the content of the files, thus i will need to fingerprint the filenames to bust the cache. However;

This is Google Chrome Headers output for static asset common.js after a reload

 Remote Address:192.168.56.101:3000
 Request URL:http://192.168.56.101:3000/public/assets2/scripts/app/common.js
 Request Method:GET
 Status Code:304 Not Modified
 Request Headers
 GET /public/assets2/scripts/app/common.js HTTP/1.1
 Host: 192.168.56.101:3000
 Connection: keep-alive
 Cache-Control: max-age=0
 Accept: */ *
 If-None-Match: W/"ogrxaeWybJBlXMTTr2leWA=="
 If-Modified-Since: Fri, 11 Jul 2014 13:46:01 GMT
 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
 Referer: http://192.168.56.101:3000/
 Accept-Encoding: gzip,deflate,sdch
 Accept-Language: tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
 Response Headers
 HTTP/1.1 304 Not Modified
 X-Powered-By: Express
 Accept-Ranges: bytes
 Date: Fri, 11 Jul 2014 13:48:34 GMT
 Cache-Control: public, max-age=864000
 Last-Modified: Fri, 11 Jul 2014 13:46:01 GMT
 ETag: W/"ogrxaeWybJBlXMTTr2leWA=="
 Connection: keep-alive

Nice, i get a 304. Now i change the contents of common.js and do a reload again, this is the output:

 Remote Address:192.168.56.101:3000
 Request URL:http://192.168.56.101:3000/public/assets2/scripts/app/common.js
 Request Method:GET
 Status Code:200 OK
 Request Headers
 GET /public/assets2/scripts/app/common.js HTTP/1.1
 Host: 192.168.56.101:3000
 Connection: keep-alive
 Cache-Control: max-age=0
 Accept: */ *
 If-None-Match: W/"ogrxaeWybJBlXMTTr2leWA=="
 If-Modified-Since: Fri, 11 Jul 2014 13:46:01 GMT
 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
 Referer: http://192.168.56.101:3000/
 Accept-Encoding: gzip,deflate,sdch
 Accept-Language: tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
 Response Headers
 HTTP/1.1 200 OK
 X-Powered-By: Express
 Accept-Ranges: bytes
 Date: Fri, 11 Jul 2014 13:50:35 GMT
 Cache-Control: public, max-age=864000
 Last-Modified: Fri, 11 Jul 2014 13:50:33 GMT
 ETag: W/"o65+0J5C8swpsmHMxNPH+w=="
 Content-Type: application/javascript
 Content-Length: 1908322
 Connection: keep-alive

At this point, i was expecting to get a 304 but appearently server detected the changes and sent a 200.

So i didn't have to use fingerprinting. Where did i go wrong?

Answer 1

Express is permanently caching it on the server side by keeping it in memory. My guess is that the express framework maintains cache consistency by checking whether or not cached resource has been modified.

Sending a request with a if-none-match and/or a if-modified-since header is the correct behavior for a user-agent. IE is attempting optimization by skipping a network round-trip, which may lead to incorrectly loaded pages.

What you need to do is either use fingerprinting - which assigns a new generic name to each modified resource - or have more low-level control about how your server serves resources, i.e. parsing the url yourself and defining rules about how responses are formed, a 304 response in your case.

Answer 2

I think the issue is with the Google Chrome, apparently when i hit reload, or press enter on url bar, Chrome still sends a If-None-Match request to server, and gets a 200. I tried with Internet Explorer, and it successfully server from cache without hitting the server. I am still wondering what is wrong with Chrome though, and how do i make it serve from cache without hitting the server.