INTRODUCTION
TROUBLE WITH THE CACHE?
Welcome to a tutorial on how to force Browsers to reload Javascript and CSS files. So you have uploaded a new and updated Javascript onto the server, but see no difference on the web browser? Hit the “view source” button only to find that it is still using the old cached copy? Well, you are not alone and this is a pretty common pain among web developers. Just how do we deal this Cache problem? Read on to find out!
I have included a zip file with all the example code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Section A | Method 1 | Method 2 |
Method 3 | Extra | Closing |
SECTION A
THE CACHING ISSUE
Before we go into the possible solutions, here is a short section that will explain the browser caching issue for the beginners – If you already know these, please feel free to skip right to the next section.
WHAT IS A BROWSER CACHE?
When a user first visits a website, the web browser will usually save some of the Javascript, CSS, and images onto the local computer – This is called the cache. On subsequent visits to that website, the web browser will simply read the previously saved files from the local cache instead, which will speed up the loading.
SO… WHAT IS WRONG WITH CACHING?
Yes, the idea of caching is smart and it does speed things up by not re-downloading the scripts. But the problem comes when new versions of the scripts are released, and the browser continues to use the old cached copy… Which is actually a pretty common problem. While we code ninjas know how to do a “force reload” on the browsers, most of the common folks do not know and end up with a “broken website”.
CAN WE DISABLE THE BROWSER CACHE WITH JAVASCRIPT?
Well, some of you guys may be thinking – Can’t we just disable this browser cache thing with Javascript then? Wouldn’t that solve the problem? Well, we cannot do that sadly, and that will be considered a security breach if we can disable a browser feature. But there are other ways to encourage the browser to reload the files, and we will go through that below.
METHOD 1
THE TIMESTAMP TRICK
Now that we have gone through the pains of caching, let us start with the simplest solution first – By adding a query string to the source and giving it a dummy timestamp (or a version number).
QUERY STRING TIMESTAMP
Timestamp Trick Demo
Yep, that is all it takes to fool the browsers into “sending a query string” and forcing it to reload the scripts. It will also be good to know that some browsers may still cache these scripts along with the query string used – If you want to force a future update, it is as easy as changing the timestamp (or version).
The not-so-good part, however, is that not all browsers are smart enough to “know” this trick; This will essentially “turn off” caching and forces the browser to always reload the script… Which is not good in terms of performance, and so, do this trick only if it is necessary.
METHOD 2
DYNAMIC LOADING
Next, we have an “evolved” version of the above dummy query string trick – The basic idea remains the same, but we will be using Javascript to dynamically insert our script tag.
JAVASCRIPT TO LOAD MORE JAVASCRIPT
Dynamic Loading Demo
Does this even make any sense? Probably yes, if you have a number of scripts that change quite often, and that you want to have proper version control… If not, I will really not recommend using this method.
METHOD 3
CACHE META TAG
This final method is a very traditional one, and that is to include a “no-cache” meta tag into the header section.
THE TRADITIONAL ONE
Cache Meta Tag
Well, I am not sure if this one will even work – Even in the ancient days, browsers can completely ignore these meta tags and still use the cached copy… Probably not a good one, and best to keep this as kind of an “honorable mention”.
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised.
SOURCE CODE DOWNLOAD
Click here to download the example code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post 3 Ways to Force Browsers to Reload Javascript & CSS appeared first on Code Boxx.
