8

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
qazal
  • 81
  • 1
  • 2

2 Answers2

17

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 resource in order to bust the browser cache.

<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 project build number or server startup time for this. Below example assumes that you've a java.util.Date object saved in the application scope under the name startup.

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

This will be generated into the HTML like:

<link rel="stylesheet" href="style.css?v=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.

In case you're using JSF+Facelets instead of JSP and correctly referencing all resources via the therefor provided components such as <h:outputStylesheet>, then then you could use a ResourceHandler as a global solution without the need to edit the resource URLs all over the place. OmniFaces VersionedResourceHandler is a good example.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • +1 a useful trick, thanks BalusC. Maybe you should compile your answers in a book (if you should have some spare time). I would buy it :) – kostja May 15 '12 at 08:49
0

I had the same issues while changing the css files and needed to refresh the site, was pretty annyoing and very incovenient.

Eventually I came across this nice little "tool", a javascript file, which you need to implement into your project. Aftwards you don't need to refresh the site anymore, you just need to save your css file, and the changes will be adopted automatically after 2,3 seconds.

Here is the link: http://cssrefresh.frebsite.nl/

By the way, very useful trick from BalusC, as always ;)

leostiw
  • 1,125
  • 3
  • 12
  • 28
  • I tried to use the way you said but is not working for me. I downloaded the js file and put it in my project but has no effect :( – Aditzu May 11 '15 at 08:05