Why doesn't FireFox cache my JavaScript file?

Question

I've been trying to figure out why Firefox does not cache my JavaScript file. I don't have this issue with Chrome or IE.

Here is what my server's Response Header looks like:

http://localhost:5012/bundles/scripts/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1
Cache-Control   public, max-age=2592000
Content-Encoding    gzip
Content-Length  42173
Content-Type    text/javascript; charset=utf-8
Date    Fri, 23 May 2014 14:33:28 GMT
Expires Sat, 23 May 2015 14:33:22 GMT
Last-Modified   Fri, 23 May 2014 14:33:22 GMT
Server  Microsoft-IIS/7.5
Vary    Accept-Encoding
X-AspNet-Version    4.0.30319
X-Powered-By    ASP.NET
fod_vary_store  User-Agent

Please note:

1. There is no file extension. I use MS ASP.NET Optimization Framework to Bundle and minify my scripts.
2. My Firefox is 29.0.1. I have "Remember History" enabled.

My question is a semi-duplicate of another question I found here: Why doesn't Firefox cache my images and CSS (without an accepted answer). It hinted to older versions of FireFox not caching any resources with query strings. However some of the users answered that the issue had been fixed in newer versions.

Solution

It is not recommended to cache resources with a query string. A query string usually represents a dynamic resource. However IE and Chrome do cache based off the Cache-Control and Expires headers. Firefox should cache, however, this could be due to a weak validation i.e. no usage of Etag. Using Etag forces strong validation of the cache-control mechanism for Firefox. Firefox tries to follow the RFC 2616 section 13.3.2. If the file has not changed on the server you should see a response of 304 Not Modified.

13.9 Side Effects of GET and HEAD

Unless the origin server explicitly prohibits the caching of their responses, the application of GET and HEAD methods to any resources SHOULD NOT have side effects that would lead to erroneous behavior if these responses are taken from a cache. They MAY still have side effects, but a cache is not required to consider such side effects in its caching decisions. Caches are always expected to observe an origin server's explicit restrictions on caching.

We note one exception to this rule: since some applications have traditionally used GETs and HEADs with query URLs (those containing a "?" in the rel_path part) to perform operations with significant side effects, caches MUST NOT treat responses to such URIs as fresh unless the server provides an explicit expiration time. This specifically means that responses from HTTP/1.0 servers for such URIs SHOULD NOT be taken from a cache. See section 9.1.1 for related information.

So you should assume that query string should not cache dynamic content which includes html. This however is not the case for IE and Chrome which pay attention to the Cache-Control and Expires headers for as given requested URI.

With that said it really depends on the implementation of the client and server.

In firefox when reloading using F5 key and examining the Developer Tools you should see 403 Not Modified for Cache Hits when using e-tag header.

So try to enable ETag support within IIS.

References:
http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/

Comments

[Shrik]

Thank you! Your answer was great, and I'm investigating into how we can rid off the cache buster as a query string.