How to avoide the website to use the locally cached JavaScript files?

Question

Friends,

Recently I hosted a Website (Developed using ASP.Net) in Client's place, which contains many JavaScript stuff for Rich UI interactivity. Everything working fine. But the main Problem is --

When I do some change in JavaScript file and upload it, It wont take effect in Client's place, Because There website takes the locally cached JavaScript files.

So, How can I avoid this?

Is there any techniques available to solve my problem?

score 6 · Answer 1 · answered Jul 28 '12 at 05:38

6

append some randomly generated number/timestamp at the end of the url to the js file like -

http://example.com/my_js_file.js?12345

answered Jul 28 '12 at 05:38

spaceman12

909
9
18

score 2 · Answer 2 · edited May 23 '17 at 12:18

After a bit of research we came up with the following list of headers that seemed to cover most browsers:

Expires: Mon, 26 Jul 1997 05:00:00 GMT
Cache-Control: no-cache, private, must-revalidate, max-stale=0, post-check=0, pre-check=0 no-store
Pragma: no-cache

In ASP.NET we added these using the following snippet:

Response.ClearHeaders(); 
Response.AppendHeader("Cache-Control", "no-cache"); //HTTP 1.1
Response.AppendHeader("Cache-Control", "private"); // HTTP 1.1
Response.AppendHeader("Cache-Control", "no-store"); // HTTP 1.1
Response.AppendHeader("Cache-Control", "must-revalidate"); // HTTP 1.1
Response.AppendHeader("Cache-Control", "max-stale=0"); // HTTP 1.1 
Response.AppendHeader("Cache-Control", "post-check=0"); // HTTP 1.1 
Response.AppendHeader("Cache-Control", "pre-check=0"); // HTTP 1.1 
Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.0 
Response.AppendHeader("Expires", "Mon, 26 Jul 1997 05:00:00 GMT"); // HTTP 1.0

Found from: http://forums.asp.net/t/1013531.aspx

Above solution from here.

He said the problem is a server caching, not client caching. I've seen this again (ftp upload was ok and ftp download was getting the correct file, but http was retrieving the old version... only for `.js` files) — 6502, Jul 28 '12 at 05:37

score 1 · Answer 3 · answered Jul 28 '12 at 05:44

Instead of having just script tags to load Javascript, load it dynamically

<script>
    function loadScript(name) {
        var s = document.createElement("script");
        s.src = name + "?" + (new Date).getTime();
        document.body.appendChild(s);
     }
     loadScript("script1");
     loadScript("script2");
 </script>

score 0 · Answer 4 · edited May 23 '17 at 10:24

0

See the notes reagarding caching in this answer: Making a show/hide smaller

Think of the cache as your friend.

edited May 23 '17 at 10:24

Community

1
1

answered Jul 28 '12 at 05:43

Julian

2,729
19
30

yogi · Answer 5 · 2012-07-28T05:40:04.103

There are techniques like avoiding browser to cache resources using cache expiration.

protected void Application_BeginRequest()
{
  //NOTE: Stopping IE from being a caching whore
  HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);
  HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
  HttpContext.Current.Response.Cache.SetNoStore();
  Response.Cache.SetExpires(DateTime.Now);
  Response.Cache.SetValidUntilExpires(true);
}

But for your case this is not advisable, I assume that your project is under development phase and to just avoid a cntrl + F5 by which resources are reloaded and cached resources are removed and reloaded again you should not implement this remedy, Because this will slow down your sites performance.

Simpler and more rational solution would be to tell your clients to cooperate and press cntrl + F5 whenever they want to see recent changes in site, after that when site would be completed there shall not be any more need to do that, OR you can implement above given code during development phase only and remove it before making your site live.

That was just a suggestion, above given code can be used alternatively. — yogi, Jul 28 '12 at 05:46

How to avoide the website to use the locally cached JavaScript files?

5 Answers5