Why is server ignoring changes in the code files even though cache is disabled?

Question

I test an html/js code on my localhost (Windows 7, Chrome v79.0.3945.130 (64-bit)) and about 50% of the time code changes are not reflected in the browser (I see it with Dev Tools/Sources).
There are a ton of advice on the internet, but neither seems to work:

• Rightclick on the reload and chose "Empty cache and Hard reload" - doesn't help in 30% of the cases.
• Disable cache in the Network tab of the Chrome Dev Tools - doesn't help.
• Add <meta http-equiv="Cache-control" content="no-cache"> in the header - doesn't help.
• Replace <script src="common.js"></script> by <script src="common.js?blabla"></script> - helps in 60% of the cases, but you need to do it after every change is a huge chore. Also, it doesn't work with html changes.
• Copy a file to a new file (like index.html to index2.html) and replace the file name in the code - always works, but it is an even bigger chore.

The exact same problem present when I commit the code to github.io

Please help me to make it so the site reflects the code changes immediately.

---

Edit: I've created a file index3.html and put only "hello world" there. Opened the file in the browser. Changed to "hello world2" - the browser updated the content. Changed to "hello world3" - the browser still was showing "hello world2" even after multiple reloads and "Empty cache and hard reload". I changed to "hello world4" - the browser still showed "hello world2". In for 4 hours I changed to "hello world5" - the browser still shows "hello world2". This file I edited with basic notepad.

---

Edit2: People keep asking what server I'm using. This looks like a part of the problem. Unfortunately, I don't know and neither do i know what exactly I need to do to check it. Here is all I've found out so far:

• I have inetpub/wwwroot directory where I put html & js files and then open index.html in a browser at http://localhost/.
• My Network panel in Devs Tools looks like this: image link.
• The server setup was very fast and didn't require any additional software to install. I.e. I'm not using node.js.
• There is iisstart.htm at inetpub/wwwroot and when I open http://localhost/iisstart.htm it says IIS7.

Answer 1

Using a parameter is the right way! Here you can add a version number you only change on big changes manually and for debugging you can set it to Date.time() so in your < head> tag, this forces all cached versions to be overwritten as the parameter is always a new one:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

Hope this helps!

Answer 2

In IIS7 Windows server running on Windows 7, to prevent caching of your content, you need to make some changes to your one of your configuration files called web.config. The configuration files for IIS 7 and later are located in %WinDir%\System32\Inetsrv\Config folder where %WinDir% is the folder where you installed Windows (usually C:/Windows).

Create a backup copy of your web.config file before editing it so you can rollback to it if the changes you'll make to the file breaks it.

In your web.config file, just add the following to prevent caching of your index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

---

Got the file path for the web.config file from here: Windows Doc: Configuration Reference

Got the configuration for the cache above from here: How to disable caching of single page application HTML file served through IIS?

Answer 3

I had same problem and this is my checklist:

1. Check web.config (caching and clientcache, kernel cache policy etc.) or .htaccess (Header set Cache-Control).
2. If you used dynamic languages like ASP, PHP there might be internal cache setting. In one case I found <%Response.Expires=1440%> within many lines of ASP code and it was overcoming all other settings! In php session_cache_expire may does the same.
3. If you are using IIS then check the server > HTTP Response headers to make sure there is nothing about caching also the same for individual websites listed under the server name.
4. check http-equiv="Cache-control" in html headers ( you passed this test! ).

Finally I have to say that in all situations above, Checking Disable cache in newtwork tab in Chrome console always worked for me to view a fresh version of pages however this is good only for debugging purposes and visitors wont do that!

Answer 4

What you write in HTML meta is a recommendation to browsers, not a strict instruction. If strict caching is enabled in the browser, this will not help.

The solutions are described well: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

I prefer on the server side to add to the scripts the version with the date of the last update of the file itself.

<script src="/myScript.js?v=1579780745150"></script>

Where 1579780745150 is Unix Timestamp updates the myScript.js file itself. It works only with its own files, but external ones are not needed. Most often in the file name is the version.

Answer 5

Based on your answer's updates, I would say that your issue is caused by IIS v7 that it uses your PC Memory for caching not you local Hard drive that's why Hard reload and all other method seems to not work properly.

I could think of 3 solution:

1. Fixing your IIS cache issue: (Not tested due the fact that i don't have a PC with IIS)

1. From Start menu, click Administrative Tools, and then click Internet Information Services (IIS) Manager. (see Images)
2. In the tree view on the left side, find your application.
3. Select the Output Caching menu item.
4. Click on Add Cache Rule then type the file extensions that you want to disable cache on them i.e. .aspx, .css, .js etc... (one at the time I guess?)
5. Now, you can either you Untick user-mode caching or Check prevent all caching. It should look similar to this:

Solution Source - Read more about IIS 7 Cache

---

2. Using some alternatives to IIS There are quite a few but i'd recommend (based on my experiences) WAMP or XAMPP Both will give you a better development "environment" and both support Windows 7. Also, if you're familiar with VS Code you can just use Live Server extension.

---

3. Use Chrome Incognito mode while developing. (Not sure if it works for IIS7)

Answer 6

This is a long shot - but what sort of editor/IDE are you using? Also, what sort of edits are you making to your index.html?

Could you provide some examples of such edits that aren't being reflected when you save and try to load the file?

I'd like to try to reproduce your issue. From what people are suggesting, it doesn't appear that the problem is within the code itself. I suspect it is an environmental issue but I'd need more info from you to confirm my suspicions.

Answer 7

This is probably really frustrating, and it doesn't sound like you're doing anything wrong.

The problem is likely that something between your browser and the script file you are calling doing some caching.

To determine what it is, let me ask how are you browsing to the localhost url?

Examples:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

If you are running file://path/to/file.html this means you are not browsing through a web server/proxy. If it is http://[something]/file.html then you are running some kind of web server and that is likely the culprit. Look for some kind of setting where you can turn off caching.

If you are not using a web server and are literally browsing directly to a local html file without a web server, then I would suggest the browser is the culprit. If this is the case, I'd suggest turning off browser caching like Martin Shishkov suggested.

Answer 8

Chrome does this thing where, if file hasn’t changed too much, not sure what it means, it will use the “compiled” cache version. For html it means parsed don tree. For JS precompiled code etc.

There is usually ways to address this, many frameworks use hash inside filenames, like: main.md5hash.js, because changing file name invalidates any cache.

Then you will be left with possibly html not updating. And to be clear, I am not sure, you can always add comment with random blob... like a date.

Answer 9

In the specific case with using Google Chrome, try this: Open Dev Tools -> Go to 'Network' tab. Check 'Disable cache' checkbox, after that refresh the page.

NOTE: In order for this to work every time the Dev Tools window MUST stay open at all times.

However, in order to propagate changes to your users, without having them to hard refresh the page, etc, you have to append file versions at the end of each referenced file for files that change frequently (just as you pointed out). For example:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

The v=20b379f72a37 appended to the end is an auto-generated file hash of the file contents.