I've been searching a lot about this, but I can't find any solution that really works: we're building a web app using lot of javascript/css files, which are modified at anytime. The thing is that we need that the client's browser always gets the last version of the script.

We tried adding the GET query (?v=CurrentDate), but the browser keeps loading the old script until you hit refresh a few times or do CTRL+F5.

One thing we want to avoid is to store those files in different folders like /scripts/v1.0/, then /scripts/v2.0/...

We're using ASP.NET MVC 5, Bootstrap and JQuery. One important thing: we only want to avoid some scripts/css caching, not everything.

I really appreciate your help! Thanks!

I've been searching a lot about this, but I can't find any solution that really works: we're building a web app using lot of javascript/css files, which are modified at anytime. The thing is that we need that the client's browser always gets the last version of the script.

We tried adding the GET query (?v=CurrentDate), but the browser keeps loading the old script until you hit refresh a few times or do CTRL+F5.

One thing we want to avoid is to store those files in different folders like /scripts/v1.0/, then /scripts/v2.0/...

We're using ASP.NET MVC 5, Bootstrap and JQuery. One important thing: we only want to avoid some scripts/css caching, not everything.

I really appreciate your help! Thanks!

• javascript
• html
• css
• caching

• 1 did you try using cache-control header - developer.mozilla/en-US/docs/Web/HTTP/Headers/Cache-Control – Sergei Kutanov Commented May 10, 2018 at 15:40
• as far as I understand, cache-control header is for all the resources, right? or you can specify which resources you want to avoid caching? – tincho87 Commented May 10, 2018 at 15:47
• while loading a page the browser makes several requests including for css and js files included in your html. Therefore you can return different headers for those resources. I don't know which web server you're using, apache will let you do this for sure – Sergei Kutanov Commented May 10, 2018 at 16:11
• but you can specify which resources you don't want to reload everytime? I mean, I only want to reload the "app" resources that were modified, not all the resources. – tincho87 Commented May 10, 2018 at 16:19
• 1 Yes you can. Here's a useful gist for htaccess, as you can see fileMatch allows you to filter resources the header to be applied to – Sergei Kutanov Commented May 10, 2018 at 16:29

1 Answer 1

Browser caching is the ability of a browser of storing results from remote resources. The process if fairly simple: it remembers the url the resource was requested from and the response. If, while the resource is cached, the resource is requested again, rather than making the call, the browser serves the saved copy from cache, as it saves bandwidth and time.

If you add a parameter that is always unique to a resource call, the browser will always reload it, because the parameter will be changed and the browser will assume it's a different resource.

Typically, a timestamp in either seconds (php timestamp) or milliseconds (javascript timestamp) will make sure your resource will always be reloaded:

JavaScript:

<script src id="myScript"></script>
<script type="text/javascript">
   // change path to match your file:
   let resourcePath = '/js/someScript.js';

   document.getElementById('myScript').src = resourcePath + '?v=' + Date.now();
</script>

PhP:

<script src="/js/someScript.js?v=<?=time();?>"></script>

Note: you can do the same for any other resource (.css or media resources), to disable caching. Also note you're not, technically, disabling caching - that's not so easy to do and differs from browser to browser. You are allowing caching but you're always requesting a different resource, because it has the bogus parameter which keeps changing (and which could be renamed from v to anything else, for example, to ?no-cache=).