How to make browser stop caching GWT nocache.js

Question

I'm developing a web app using GWT and am seeing a crazy problem with caching of the app.nocache.js file in the browser even though the web server sent a new copy of the file!

I am using Eclipse to compile the app, which works in dev mode. To test production mode, I have a virtual machine (Oracle VirtualBox) with a Ubuntu guest OS running on my host machine (Windows 7). I'm running lighttpd web server in the VM. The VM is sharing my project's war directory, and the web server is serving this dir.

I'm using Chrome as the browser, but the same thing happens in Firefox.

Here's the scenario:

• The web page for the app is blank. Accorind to Chrome's "Inspect Element" tool, it's because it is trying fetch 6E89D5C912DD8F3F806083C8AA626B83.cache.html, which doesn't exist (404 not found).
• I check the war directory, and sure enough, that file doesn't exist.
• The app.nocache.js on the browser WAS RELOADED from the web server (200 OK), because the file on the server was newer than the browser cache. I verified that file size and timestamp for the new file returned by the server were correct. (This is info Chrome reports about the server's HTTP response)

• However, if I open the app.nocache.js on the browser, the javascript is referring to 6E89D5C912DD8F3F806083C8AA626B83.cache.html!!! That is, even though the web server sent a new app.nocache.js, the browser seems to have ignored that and kept using its cached copy!

• Goto Google->GWT Compile in Eclipse. Recompile the whole thing.

• Verify in the war directory that the app.nocache.js was overwritten and has a new timestamp.
• Reload the page from Chrome and verify once again that the server sent a 200 OK response to the app.nocache.js.
• The browser once again tries to load 6E89D5C912DD8F3F806083C8AA626B83.cache.html and fails. The browser is still using the old cached copy of app.nocache.js.
• Made absolutely certain in the war directory that nothing is referring to 6E89D5C912DD8F3F806083C8AA626B83.cache.html (via find and grep)

What is going wrong? Why is the browser caching this nocache.js file even when the server is sending it a new copy?

---

Here is a copy of the HTTP request/response headers when clicking reload in the browser. In this trace, the server content hasn't been recompiled since the last GET (but note that the cached version of nocache.js is still wrong!):

Request URL:http://192.168.2.4/xbts_ui/xbts_ui.nocache.js
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:192.168.2.4
If-Modified-Since:Thu, 25 Oct 2012 17:55:26 GMT
If-None-Match:"2881105249"
Referer:http://192.168.2.4/XBTS_ui.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Response Headersview source
Accept-Ranges:bytes
Content-Type:text/javascript
Date:Thu, 25 Oct 2012 20:27:55 GMT
ETag:"2881105249"
Last-Modified:Thu, 25 Oct 2012 17:55:26 GMT
Server:lighttpd/1.4.31

Darrickdarrill

BTW, this seems similar to #3408149 but it didn't contain any info that helped me solve this problem. – Darrickdarrill

Did you read developers.google.com/web-toolkit/doc/latest/… ? – Fariss

Yes, and it seems like the right thing is happening, because that page says "an If-Modified-Since fetch is sufficient". I can tell from the Chrome Inspect Element tool that the browser sent "If-Modified-Since:Thu, 25 Oct 2012 17:03:53 GMT" in the GET request, and the server responded with "Last-Modified:Thu, 25 Oct 2012 17:55:26 GMT" – Darrickdarrill

Added a HTTP request/response header trace to make this more clear to potential helpers. – Darrickdarrill

I'm suspecting that the problem is that the browser is making a guess about the freshness lifetime of the nocache.js file, and determining the file is still "fresh". This is from reading the HTTP RFC section 13.2.4: "If none of Expires, Cache-Control: max-age, or Cache-Control: s- maxage (see section 14.9.3) appears in the response, and the response does not include other restrictions on caching, the cache MAY compute a freshness lifetime using a heuristic." (from w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13) – Darrickdarrill

facing the same issue, this is bug in gwt2.7.0, when I downgrade to 2.6.0, problem gone – Kline

Answer 1

The best way to avoid browser caching is set the expiration time to now and add the max-age=0 and the must-revalidate controls.

This is the configuration I use with apache-httpd

ExpiresActive on
<LocationMatch "nocache">
   ExpiresDefault "now"
   Header set Cache-Control "public, max-age=0, must-revalidate"
</LocationMatch>
<LocationMatch "\.cache\.">
   ExpiresDefault "now plus 1 year"
</LocationMatch>

your configuration for lighthttpd should be

server.modules = (
    "mod_expire",
    "mod_setenv",
)
...
$HTTP["url"] =~ "\.nocache\." {
  setenv.add-response-header = ( "Cache-Control" => "public, max-age=0, must-revalidate" )
  expire.url = ( "" => "access plus 0 days" )
}

$HTTP["url"] =~ "\.cache\." {
  expire.url = ( "" => "access plus 1 years" )
}

Rem

Thanks. I fixed some typos in the lighttpd config. Thanks for translating the Apache config into lighttpd. – Darrickdarrill

Answer 2

We had a similar issue. We found out that timestamp of the nocache.js was not updated with gwt compile so had to touch the file on build. And then we also applied the fix from @Manolo Carrasco Moñino. I wrote a blog about this issue. http://programtalk.com/java/gwt-nocachejs-cached-by-browser/

We are using version 2.7 of GWT as the comment also points out.

Ardrey

The timestamp not changing was our problem. I believe it is only a bug in GWT 2.7. Thanks for the blog post! – Ancient

Great answer. Now I learned Shift+F5 is a temporary solution for the first time. – Alfeus

Answer 3

There are two straightforward solutions (second is modified version of first one though)

1) Rename your *.html file which has a reference to *.nocache.js to i.e. MyProject.html to MyProject.jsp Now search the location of you *.nocache.js script in MyProject.html

<script language="javascript" src="MyProject/MyProject.nocache.js"></script>

add a dynamic variable as a parameter for the JS file, this will make sure actual contents are being returned from the server every time. Following is example

<script language="javascript" src="MyProject/MyProject.nocache.jsp?dummyParam=<%= "" + new java.util.Date().getTime() %>"></script>

Explanation: dummyParam will be of no use BUT will get us our intended results i.e. will return us 200 code instead of 304

Note: If you will use this technique then you will need to make sure that you are pointing to right jsp file for loading your application (Before this change you was loading your app using HTML file).

2) If you dont want to use JSP solution and want to stick with your html file then you will need java script to dynamically add the unique parameter value on the client side when loading the nocache file. I am assuming that should not be a big deal now for you given the solution above.

I have used first technique successfully, hope this will help.

Counterfeit

Answer 4

• The app.nocache.js on the browser WAS RELOADED from the web server (200 OK), because the file on the server was newer than the browser cache. I verified that file size and timestamp for the new file returned by the server were correct. (This is info Chrome reports about the server's HTTP response)

I wouldn't rely on this. I've seen a bit of strange behaviour in Chrome's dev tools with the network tab in combination with caching (at least, it's not 100% transparent for me). In case of doubt, I usually still consult Firebug.

So probably Chrome still uses the old version. It may have decided long ago, that it will never have to reload the resource again. Clearing the cache should resolve this. And then make sure to set the correct caching headers before reloading the page, see e.g. Ideal HTTP cache control headers for different types of resources.

Amey

Answer 5

Open the page in cognito mode just to get-rid of cache issue and unblock yourself.

You need to configure cache time as mentioned in others comments.

Halation

Answer 6

After unsuccessfully preventing caching via Apache I created a bash script that root runs every minute in a cron job on my Linux Tomcat server.

#!/bin/bash
#
# Touches GWT nocache.js files in the Tomcat web app directory to prevent caching.
# Execute this script every minute in a root cron job.
#
cd /var/lib/tomcat7/webapps
find . -name '*nocache.js' | while read file; do
    logger "Touching file '$file'"
    touch "$file"
done

Flagstad

Using a root-script to touch a file served by your web-server is really a bad idea - esp. since what you should be doing, is to ensure the content is served with the proper HTTP-headers instead (your server won't even get asked, if the browser - or an intermediate proxy - has cached the content in good faith). – Mediatize