find a location for property in a new city

Monday, 6 September 2010

How to force clients to hard refresh their browser cache

We had this problem when we removed our style sheets and put them into a HttpHandler to serve them all in one single request. The problem was that due to some caching problem, users' needed to refresh their page to receive the updated CSS files. This resulted in confused users looking at a non-styled site featuring trendy black Times New Roman font on a original white background with blue and purple retro links? old skool...

We (as developers) nonchalantly refreshed the page and happily continued, others didn't and we quickly realised that "Oh, they just need to refresh the page" wasn't good enough.

Solution

We needed a way to make the users refresh their browser caches, but how since we have no control over their browsers?

I came up with a bit of JavaScript that will do a hard refresh of the page and use cookies to record that it has been refresh and ensure that it only happens once and doesn't go into an infinite loop.

Here is some code I came up with:
//jquery plugin for cookies
<script type="text/javascript" src="/js/jquery/jquery.cookies.2.0.1.min.js"></script>
<script type="text/javascript">
//give it a new name each time you need to do this
var cookieName = 'refreshv1';
//check client can use cookies
if ($.cookies.test()) {
    //get the cookie
    var c = $.cookies.get(cookieName);
    //if it doesn't exist this is their first time and they need the refresh
    if (c == null) {
        //set cookie so this happens only once
        $.cookies.set(cookieName, true, { expires: 7 });
        //do a "hard refresh" of the page, clearing the cache
        location.reload(true);
    }
}
</script>
Feel free to work with this code but please do not use it without testing or ensuring it is right for your situation. It is merely an idea that worked for me.

Follow britishdev on Twitter

6 comments:

  1. It's easier to append a query string to the stylesheet link. I believe the same applies to images and javascript files too.

    Pete

    ReplyDelete
  2. Ha. Yeah that's true, good plan. This turned out to be a non-issue for us in the end but thought the code was still interesting

    ReplyDelete
  3. Hi Colin

    Does this work the same with meta tags?

    META HTTP-EQUIV="Pragma" CONTENT="no-cache"
    META HTTP-EQUIV="Expires" CONTENT="-1"

    ReplyDelete
  4. @Colin - Meta Expire will only affect the current page you are on; not what was previously cached by the browser. It works well in most cases but will not work 100% onLoad.

    ReplyDelete
  5. THANK YOU SO MUCH!!! This solves my problem.

    ReplyDelete