clear browser cache using jquery/Angularjs

Question

I'm tying to clear the browser cache programmatically. I am doing this because i have deployed a new version of the application, but the browser gets old version and contents from cache. but i want to clear cache when browser gets new version and load the latest app from server.

I have also use location.reload(true); but it is not clearing cache just reload the current page.

Answer 1

You can clear browser cache by using version trick

For example,

<script src="custom.js?version=1.1.1"></script>

just add dummy version at the end of the file type.It will reload the code

Answer 2

You can't really clear the cache using Angular or JQuery. One way is to force your browser to request fresh resources.

One way to do this is using gulp-rev.

https://github.com/sindresorhus/gulp-rev

Answer 3

You can't do it from JavaScript. What you can do is following:

Append some variable string to the end of your content url. Example:

//example.com/script.js?version=1.0

or

var timestamp = new Date().getTime()
var url = "//example.com/script.js?ts=" + timestamp

This essentially fools the browser that the url you are trying to load is a new one and it skips looking for it in the cache.

Timestamp method does have a disadvantage that it doesn't make use of browser caching ever.

Also, make sure that your HTML file has proper content header set so that the html itself is not cached. Checkout How to control web page caching, across all browsers? for details on cache control headers.