How To Load The Latest Javascript Files Every Time The User Visits The Website

Possible Duplicate: How do I force the refresh of javascript files in a browser? My application in ASP.NET MVC based and javascript files are included in .csHtml file. I require

Solution 1:

Put a version number in the filename for your JS files (like jQuery does). Then, whenever you rev the JS files, you bump the version and change the HTML files that include it.

The jQuery file naming example:

jquery-1.8.3.js
jquery-1.9.0.js

This lets you set very long caching on your server for the JS files themselves which really helps with performance on your site. But, any time you rev the JS files, the viewer gets the new JS files immediately because the newly named files are pulled by the new HTML file because they aren't in the browser cache.

Solution 2:

You want to use Bundling and Minification. Depending on your version of MVC, the implementation is slightly different. In the newest version, it is used by default.

Bundling and Minification will combine and minify all your scripts (and styles sheets) into one file (or multiple, depending on how you use it) and serve them up with a unique parameter. Any time a file changes in that particular bundle (and thus the user would require to download the new files) the parameter automatically changes.

For MVC3, you'll need to install Microsoft Web Optimization.

Then in your global.ascx, you'd do something like this and call it from Application_Start:

privatestaticvoidSetupBundling()
{
     var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
     jsBundle.AddDirectory("~/Scripts/", "*.js", false);
     jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
     BundleTable.Bundles.Add(jsBundle);

     var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
     randomBundle.AddFile("~/Scripts/random/main.js");
     randomBundle.AddFile("~/Scripts/random/cool.js");
     BundleTable.Bundles.Add(randomBundle);

     var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
     cssBundle.AddDirectory("~/Content/", "*.css", false);
     BundleTable.Bundles.Add(cssBundle);
}

So that first bundle will bundle every .js file in your ~/Scripts folder. In your head file you can reference it like:

<script src="@Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"type="text/javascript"></script>

And it will be rendered like:

<scriptsrc="/Scripts/js?v=-2573834892993289"type="text/javascript"></script>

And any time one of your .js files change (or .css), so will the parameter.

Similar implementation for the CSS bundle, and also if you want to reference the randomBundle only on certain pages.

Solution 3:

You can do cache-busting by attaching a random hash or number URL parameter after each javascript file URL like so:

http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990

Since that number is different each time the page is loaded the URL will not be cached. More info here. Tutorial gives PHP examples, but if you know how to create a hash or random number in any language & can attach it to a URL you are good to go.

Solution 4:

Personally I use PHP, but the way I do this is to search the output buffer for static files, such as images, scripts and stylesheets (and audio, video, whatever), then retrieve their modification time from the filesystem and append it as /t=TIMESTAMP. I then use .htaccess to strip the timestamp off and get the original filename. This is preferred over query strings because many clients will not cache files with query strings, and it's also preferred over versioning because it updates automatically simply by modifying the file.