自动清除浏览器缓存

Question

Is there any workaround to auto clear the cache as we update the javascript code? It always happen where when I do the script code changes, from other user device, they won't be able to see the new update of the website because their browser is still reading the old script and they will see this as a bug since they do not know about this cache stuff. I have to mention the cache every time when there is an update made which is giving a bad experience to the user.

Usually for an image, I will set some additional unique id from the get method inside the url so that the website is able to read the latest update. But for javascript / jquery, I wonder if there is any kind of code to force the browser to read the new update instead of manually clearing the cache.

Answer 1

You have 3 options:

1. Put this in the head section of your html page:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

This will make your app to not cache anything at all ( at least you can keep it during development)

2. Use hard refresh for example ctrl+f5 if you are using chrome every time you reload.

3. Use a Cache killer plugin for your browser. There's a bunch of them out there, you just install them and enable them whenever you want.

Answer 2

You can add a dummy unique id for you javascript. (eg, /javascript.js?id=123)