Cache Clear and the mystery of unchanging Javascript and Images during web development

2018-02-14 02:24 pm

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>
  becomes
  <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:

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
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)!

Categories: : Tips and Tricks, Web Development, Caching