I have one website which serves listener.js on the main page. I want to update this javascript file with some extra codes. But browsers (especially chrome) has memory and disk cache. Also HTTP cache of course. I tried something about that state. I tried just F5, the file loaded from memory cache. Then I killed chrome and opened the website again, javascript file loaded from the disk cache. So I have 2 questions;

1. When chrome clears disk cache?
2. How can I say to my visitors don't use any cache and get the new javascript file from my server?

Update:

3. Can I do this with no-cache Http header?

I have one website which serves listener.js on the main page. I want to update this javascript file with some extra codes. But browsers (especially chrome) has memory and disk cache. Also HTTP cache of course. I tried something about that state. I tried just F5, the file loaded from memory cache. Then I killed chrome and opened the website again, javascript file loaded from the disk cache. So I have 2 questions;

1. When chrome clears disk cache?
2. How can I say to my visitors don't use any cache and get the new javascript file from my server?

Update:

3. Can I do this with no-cache Http header?

• javascript
• google-chrome
• caching
• browser-cache

Share Improve this question Follow edited Mar 5, 2019 at 9:14 user10814567 asked Mar 5, 2019 at 7:16 Murat KaragozgilMurat Karagozgil 19811 gold badge22 silver badges1313 bronze badges 1

• 2 When developing in chrome, you can disable cache by F12 and switch to "Network" and select "Disable cache". For product, please add a random number after the js file. e.g "app.js?10101". – suertang Commented Mar 5, 2019 at 7:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Removing temporarily cached file known as cache busting. It is useful because browser doesn't have to download these files again.

If it is causing issues, developers can force browsers to download new files. This is performed by re-naming file but there is a better way

src="js/listener.js" => src="js/listener.js?v=2"

Update:

Or hash like this => ?v=c298c7f8233d which is better than ?v=2 (ment by Tech Guy)

(Credits: 30-seconds)

Chrome doesn't auto clear disk cache unless this option is checked

Privacy settings > Content settings > Keep local data only until you quit browser

In which case, it deletes cache on closing the browser.

You usually prevent a client from saving your files in cache by hashing your filenames in each build, which is the most mon cache-busting technique. That means in every release, you will have a new file name and the old cached file won't matter. For instance

Most build tools like Webpack have cache-busting features that you can turn on.

You don't want to stop the user from caching at all, because caching is immensely useful and prevents repeated downloads. You just want to prevent downloads when you build a new release.

This solution worked for me.

let randomNum = Math.round(Math.random() * 10000);
src = "js/listener.js?" + randomNum;

Every time a random number will be generated and it'll be treated as a new request and won't be cached.