0

I often need to edit my scripts (js) and styles (css) in my web app, but they are getting cached so the website does not reflect the changes. Even deleting each time the browser cache does not fix the problem. I have to change the filename (for js or css) every time in order to get the changes displayed, but this is really annoying.

I am sure I am missing some point here. Could you pls suggest?

Thanks

Fabio Marzocca
  • 1,573
  • 16
  • 36
  • 3
    If you're using Chrome, CTRL+F5 should refresh the resources. If it's not, check your browsers settings. You can set your Chrome to avoid chaching resources via the developer tools (F12) > settings. – Koby Douek Jul 02 '17 at 12:51
  • I am using Safari, Firefox and CHrome (on Mac), but Ctrl+F5 doesn't fix the issue. – Fabio Marzocca Jul 02 '17 at 12:52
  • Depending if the editor has it, you should look into Live Refresh/Reload or something similar. This automatically updates the page, without reloading. – Pim Jul 02 '17 at 12:53
  • Where are the assets being cached? Server? Browser? – Clive Jul 02 '17 at 12:55
  • Checkout this post https://stackoverflow.com/questions/11467873/how-to-append-timestamp-to-the-java-script-file-in-script-tag-url-to-avoid-cac – Anthony Jul 02 '17 at 13:00

3 Answers3

1

Refreshing the page should do the trick in any browser. However, if the JavaScript/CSS files are linked in a portion of the page that is loaded dynamically, that can be a bit tricky. You can append a parameter to the file name. This is not an ideal solution, but it can solve the problem:

<script type="text/javascript" src="/myscript.js?i=123"></script>

Now, you'll have to change the value of the parameter each time. To do that, you'll have to link the file using JavaScript. Something like:

<script>document.write("<script type='text/javascript' src='/myscript.js??v=" + Date.now() + "' /><\/script>");</script>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
1

ctrl + shift + R or cmd + shift + R to clear browser cache in Chrome.

Also you can tick the Disable cache (while DevTools is open) chrome option.

Thomas L'huillier
  • 175
  • 10
0

You can add the code below in a .htaccess file (assuming you don't use Windows on the server):

<filesMatch "\.(js|css)$">
  FileETag None
  <ifModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>
Gerard
  • 15,418
  • 5
  • 30
  • 52