Preventing Caching of CSS Files

Avoid Javascript/Css caching

Browser caching is the ability of a browser of storing results from remote resources. The process if fairly simple: it remembers the url the resource was requested from and the response. If, while the resource is cached, the resource is requested again, rather than making the call, the browser serves the saved copy from cache, as it saves bandwidth and time.

If you add a parameter that is always unique to a resource call, the browser will always reload it, because the parameter will be changed and the browser will assume it's a different resource.

Typically, a timestamp in either seconds (php timestamp) or milliseconds (javascript timestamp) will make sure your resource will always be reloaded:

JavaScript:

<script src id="myScript"></script>
<script type="text/javascript">
   // change path to match your file:
   let resourcePath = '/js/someScript.js';

   document.getElementById('myScript').src = resourcePath + '?v=' + Date.now();
</script>

PhP:

<script src="/js/someScript.js?v=<?=time();?>"></script>

Note: you can do the same for any other resource (.css or media resources), to disable caching. Also note you're not, technically, disabling caching - that's not so easy to do and differs from browser to browser. You are allowing caching but you're always requesting a different resource, because it has the bogus parameter which keeps changing (and which could be renamed from v to anything else, for example, to ?no-cache=).

Preventing Caching of CSS Files

I've ran across this problem a few times and usually over come the problem on production sites by calling my css like this

<link rel="stylesheet" type="text/css" href="style.css?v=1" />

When you roll out an update just change the v=1 to v=2 and it will force all of your users browsers to grab the new style sheets. This will work for script files as well. If you view source on Google you will notice they use this approach as well.

How to Prevent Browsers from Caching CSS Files?

You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.

Avoid caching of js and css files in jsp page

For storing build numbers I think properties files is the best place. And for your problem, you can get this build number using Spring tag library which can be included like this,

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

Updated

You can then get the build number from properties file which is configured in your ApplicationServlet.xml and finally can use build number as follows,

<spring:message code="buildNumber" var="buildNumber" />
<link rel="stylesheet" href="<c:url value="/resources/css/custom/select2.css?${buildNumber}"/>" type="text/css" />

Your applicationServlet-servlet.xml file must include something like this,

<beans:bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
    <beans:property name="basenames">
        <beans:list>
            <beans:value>buildNumber</beans:value>
            <beans:value>gui</beans:value>
            <beans:value>message</beans:value>              
        </beans:list>
    </beans:property>
</beans:bean>

Here you can store your build number in separate properties file named, buildNumber.properties and having entry like this, buildNumber=601.

You can change the build number anytime you want to deploy your latest code to the server.

With this you can ensure that your client won't need to clear his own browsers cache whenever a new version of your application has deployed.

---

Related Topics