Changes in CSS files are not reflected after deployment

Question

I am working on a JSF web application. Everytime when I change CSS files and deploy the program for first time, the changes in CSS files are not reflected. I tested it on different situations. How is this caused and how can I solve it?

Answer 1

yes when I press Ctrl+F5 it is loaded

Then it was just been served from the browser cache. That's perfectly fine. It saves network bandwidth in real production environment. But I can imagine that this is disturbing during development or whenever you bring updates into production. During development I'd just learn to get used to Ctrl+F5 key. But for production you'd really like to solve it as the enduser may not be aware of that "trick".

A common approach is to append a version number as request parameter to the CSS resource.

<link rel="stylesheet" href="style.css?v=1.0" />

Everytime when you make major changes the CSS, then you'd like to increment the version number before bringing the update into production.

<link rel="stylesheet" href="style.css?v=1.1" />

This will force the browser to reload the stylesheet.

Another approach is to use the server's startup time for this. As you're using JSF, this could easily be done with a java.util.Date declared as an application scoped managed bean in faces-config.xml.

<managed-bean>
    <description>Startup date</description>
    <managed-bean-name>startup</managed-bean-name>
    <managed-bean-class>java.util.Date</managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
</managed-bean>

Then you can use Date#getTime() to get the timestamp:

<link rel="stylesheet" href="style.css?#{startup.time}" />

This will be generated into the HTML like:

<link rel="stylesheet" href="style.css?1314105929937" />

It'll change everytime you restart the server or redeploy the webapp, so the browser will be forced to reload the resource (even also when it has actually not been changed! keep this in mind if caching and bandwidth usage is a concern). The same technique is applicable on other static resources like JavaScripts and images.

When you're already on JSF 2.x, then you can use the builtin "resource library versioning" feature for that. See also What is the JSF resource library for and how should it be used?