What is a browser cache ?
The browser cache is a temporary storage location on your computer for files downloaded by your browser to display websites. The browser stores the static content of a website such as java script files , style sheets and images .
When you revisit a website, the browser checks if the content is already present in cache or not . If present it loads the files from the cache else it downloads from the server and keeps a local copy in the cache to serve next time . This reduces bandwidth usage on both the user and server side and allows the page to load faster. Hence, the cache is especially useful when you have a slow or limited Internet connection.
The cache stays till the expire time if not cleared by the user . Also it gets reloaded when the user does a hard refresh (using Ctrl + R) .
The problem arises when you are in process of upgrading the website . After you upgrade your style sheet or java script file , your clients will still be viewing the older version of the files which are cached on their local system . So to over come this we need to do little trick .
Suppose you have a style sheet and you refer them like below –
<link rel=’stylesheet’ href=’css/style.css’ type=’text/css’/>
The browser keeps track on the cache using the URL . So just give a version number in the URL which will not affect the style sheet .
<link rel=’stylesheet’ href=’css/style.css?ver=1.0.1′ type=’text/css’/>
and when you update your website to the next version you should update the link like below so that all your users will have a fresh copy of your website
<link rel=’stylesheet’ href=’css/style.css?ver=1.0.2′ type=’text/css’/>