Hello Everyone!

I wanted to take a moment to talk about a scenario that happens very often when doing web development. The scenario can cause all sorts of headaches, pains, and lost time. Often, the resolution seems like some sort of voodoo magic was applied when suddenly everything "just works."

The scenario is common. We are developing a new page or deploying a new version of the website and we are replacing some javascript, css, or image file. When we restart the webpage in our browser and attempt to see our glorious changes, much to our repeated chagrin, the site looks exactly as it had previously looked, and it seems as if our updates are just not working.

When this ugly scenario happens, we may spend hours of our time combing through our javascript code and/or trying to drop and recreate the images, or trying to figure out why our latest css styles are not being applied. No matter what we do, it can seem utterly hopeless, and so in an attempt to gain our sanity, we walk away from the system for a bit. When we return, or open the site in a different browser, suddenly everything works! Wow!

What just happened?

It's called "cache" and it got cleared, so that the resources were reloaded, thereby allowing our new javascript, images, and/or css styles to easily be correctly applied. Without us doing anything different, the site now works because the actual files we thought we were using are actually being used - whereas before the site was using a cached version of the site in our browser.

Before you get upset and wonder why we'd ever let this happen, please remember that cache is a great thing! Most of the time our files aren't changing, and cache prevents the users from having to reload everything each time they visit our pages. This speeds up the page and also limits the throughput that must take place on every web request.

So how can we make sure not to waste those hours again?

There are a couple of things we can do as web developers to make sure that this caching issue is not going to make our site appear to fail to update:

  • When updating a javascript, css, or image file, simply put a time/date stamp on it [this is the best option]
    • Instead of just referencing the filename, include a question mark (?) with a random timestamp:
      <script type="text/javascript" src="../myjsfile.js"></script>
      <script type="text/javascript" src="../myjsfile.js?v=20180214144500"></script>
  • Reset the application pool on the IIS server by making a simple change to web.config [can be dangerous, and doesn't really help us in local development]
    • This can be very dangerous, especially if you are using sessions
    • The potential exists that even with the application pool reset, the cache might not be completely cleared on your clients' browsers, which could still make the site appear to use the old version of the files

And how do I solve this problem on my local development machine?

As a local developer, however, there are two very easy solutions we can use to make sure that we don't get stuck with this problem any longer:

  1. The quick-and-easy solution is to make sure to hit the key combination of "ctrl + f5" when viewing our webpage. By pressing this combination, we should be able to force a full refresh of all items on the page. I say should because there are times when it still seems like this is not the full solution
  2. The best solution I have found is to simply use a free chrome extension such as "Clear Cache". This extension allows us to set our browser to reset out all of the cache information that may be bleeding into our "latest" version of the code. When this is applied, a simple "refresh" button exists at the top of chrome, which allows us to have a one-click, simple button press that clears the cache.

Finally, one thing I do is in the settings of the clear cache extension, I make sure to set the page to refresh:

Enjoy (and avoid the pain and headaches of bad cache in the future)!


P.S. If you are currently taking my ASP.Net MVC Quickstart course, I would love to get your feedback on a short survey regarding upgrades to the course that I am considering. Would you mind giving me a few minutes to provide some quick and valuable feedback? If so, please click this link.

P.P.S I am going to be doing a live workshop version of my ASP.Net MVC Quickstart course in the near future [limited to the first 10 people that respond]! How would you like direct access to me, mentorship, and valuable training in addition to all of the benefits of the ASP.Net MVC quickstart course enjoyed by nearly 17,000 students? If you would like more details, please click this link.