Howto: Javascript files always up-to-date

Question

I have a .NET web applications which uses a lot of javascript. The .aspx and the .js files go hand-in-hand together. Problem: The .aspx files are always up-to-date on the client (not cached) but the .js files might well be cached. This is even a problem if the files are only cached for one session since users are spending many hours on my site and everytime I update a .aspx/.js pair users are running into a problem.

Now, I found a solution but I am not sure if there is perhaps a better solution or if my solution has a performance drawback.

This is my solution:

.js-References in .aspx:

<script type='text/javascript' src='../scripts/<%# GetScriptLastModified("MyScript.js") %>'></script>

So, the "GetScriptLastModified" will append a ?v= parameter like this:

protected string GetScriptLastModified(string FileName)
{
  string File4Info = System.Threading.Thread.GetDomain().BaseDirectory + @"scripts\" + FileName;
  System.IO.FileInfo fileInfo = new System.IO.FileInfo(File4Info);
  return FileName + "?v=" + fileInfo.LastWriteTime.GetHashCode().ToString();
}

So, the rendered .js-Link would look like this to the client:

<script type='text/javascript' src='/scripts/GamesCharts.js?v=1377815076'></script>

The link will change every time, when I upload a new version and I can be sure that the user immediately gets a new script or image when I change it.

If I remember correctly, Safari will not cache anything downloaded with a query parameter. So your solution will be correctly cached by all other web browsers except Safari. — slebetman
– slebetman, Commented Sep 22, 2010 at 6:54
It's a common solution, but you're better off having the version in the filename, for instance /scripts/GamesCharts_<version>.js as query parameters prevent proxy caching of resources. — Danny Thomas
– Danny Thomas, Commented Sep 22, 2010 at 7:00
Yes, that's the solution I have today: Renaming the files to myscript_v1.js. But then I also need to update all references to those files. Then the history in my source repository is broken. It works as expected but I am looking for an easier solution... — newtogit
– newtogit, Commented Sep 22, 2010 at 14:43
Well, have you tried adding the <scripts> tag in a contentplaceholder so that you can manually update the version in one place? — OnesimusUnbound
– OnesimusUnbound, Commented Jun 3, 2011 at 11:03

slebetman · Accepted Answer · 2010-09-22 07:03:05Z

2

Safari refuses to cache URLs with query parameters. So instead of a query parameter you can use something like a versioned path and use mod_rewrite to remove it.

Something like:

<script type='text/javascript' src='/scripts/1377815076/GamesCharts.js'></script>

And in Apache config file (config for other servers left as homework):

RewriteEngine On
RewriteRule  ^/scripts/[0-9]+/(.+)$    /scripts/$1

answered Sep 22, 2010 at 7:03

slebetman

115k19 gold badges147 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KOK F S · Accepted Answer · 2011-06-03 10:53:29Z

2

What we do in our environment is we manually increase the counter in the calling script :

<script type='text/javascript' src='/scripts/GamesCharts.js?v=1'></script>

Whenever there is any update to the js file , we just increment the counter :

<script type='text/javascript' src='/scripts/GamesCharts.js?v=2'></script>

Your method works automatically but it needs to retrieve the LastWriteTime every time the script being called. If its a high traffic site, it will increase the CPU processing.

answered Jun 3, 2011 at 10:53

KOK F S

361 bronze badge

1 Comment

newtogit Over a year ago

Yes, but I am not fetching the last time write from disk every time. I keep a cache and when I deploy, I empty the cache. Additionally, the scripts are cached locally. I think our solution adds nearly no overhead.

JustinShoffstall · Accepted Answer · 2010-09-22 06:50:32Z

0

Just a thought: You could probably just render the JS as an ASPX; I've done this for forceful reload of CSS before with a JSP. Not proud of that solution, but it's worked before.

<script type='text/javascript' src='/mycode/GamesCharts.js.aspx'></script>

Then just render the JS statically in the ASPX file.

answered Sep 22, 2010 at 6:50

JustinShoffstall

1612 bronze badges

3 Comments

slebetman Over a year ago

If you're doing this, might as well configure your web server to serve js files as non-cached.

JustinShoffstall Over a year ago

Absolutely; that's the right way to go if you want all of your JS dynamic. However, if you only have a few files that must be uncached, the above method works.

newtogit Over a year ago

Well my .js files change once every few weeks. I do not want them to be totally dynamic. No way. I even configured my webserver with a no-expiry tag. But SOMETIMES they DO change and then I need a mechanism to force an update.

Collectives™ on Stack Overflow

Howto: Javascript files always up-to-date

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related