Have browser fetch JavaScript API from its cache

[BryanBaker]

I'm developing a mobile web application with the compact API build. The base API download is about 137 KB. On a slow 3G connection this file can take a couple of minutes or more to download. The browser appears to be downloading this file on every startup, rather than fetching from its cache. Some of the related API files (InfoWindow.css, svg.xd.js, etc.) do get pulled from the browser cache.

It looks like the ESRI server is responding differently with these files. For the base API file, the response headers include:

Cache-Control:public, max-age=31536000,public Expires:Sat, 27 Apr 2013 18:35:32 GMT

But for the other files pulled from browser cache, the response includes:

Cache-Control:max-age=31536000,public ETag:"0c11f96a28cd1:0" Last-Modified:Fri, 23 Mar 2012 03:11:06 GMT

Apparently having the Last-Modified setting causes the browser to fetch from cache on subsequent requests, assuming the max-age date isn't exceeded (which in this case is set to about a year ahead, in seconds).

Is this intentional -- to have the browser always download a new copy of the base API? Is there any way to force the browser to use a cached copy? I'm thinking of experimenting with a proxy that would feed the API with a directive to fetch from cache, but not sure that would work either. It's a pretty painful experience for users who have to wait for that startup on slow mobile connections - it could force us to abandon the map or the JS API altogether.

[BryanBaker · Accepted solution]

Actually fetching from cache does work. The problem I had was actually with jQuery and jQueryMobile, which I'm using in the application. The jQueryMobile framework takes any script fetched in the page and requests it via its own ajax methods. Even <script src="..."> tags are handled this way, so that it can inject the script into the page dynamically without page refreshes. When it sends the request, by default it appends a time-stamp parameter to the query string, something like ?_123458588. That makes every request look like a unique, new URL, so cached copies of files aren't used. It does that by default apparently on the theory that scripts might change between reloads - but in this case of course it makes the app much slower. You can override this non-caching behavior in a few ways. One is by a global setting up front on load:

$.ajaxSetup({ cache: true });

Or you can handle requests individually. See "Caching Responses" at http://api.jquery.com/jQuery.getScript/.