How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

Question

I'm starting to work with JSF 2 so I wanted to give a try to h:outputStylesheet. It works fine but then I tried to apply the "pattern" or trick of adding a query string to the request which changes with the file version to force browsers to fetch changes.

Something like what is used here.

Unfortunately I haven't been able to do it. Actually, when using that tag it doesn't generate a simple URL but a computed one which already has a query string. I've found some info about versioning of resouces in JSF 2 both in the spec and here, but it seems to refer to multiple versions of a resource which is not what I need.

Of course I can always go back to NOT use the new tag. But I wanted to share this here for discussion.

Update 1 - some example:

What I've tried is something like this:

<h:outputStylesheet library="css" name="estilo.css?v=1" target="head"/>

Which renders as:

<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />

Quite descriptive. ;-)

What I try to get is something like this:

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

Which, using JSP, I used to put this way:

<link rel="stylesheet" type="text/css"
 href="<c:url value='/css/estilo.css?v=${initParam.version}'/>"/>

Answer 1

Facing the same challenge, I ended up extending javax.faces.application.ResourceHandlerWrapper and javax.faces.application.ResourceWrapper to append "&v=x.y.z" to the result of ResourceWrapper#getRequestString().

I saw this kind of solution implemented by Primefaces and Openfaces. Just take a look at the source of

org.primefaces.application.PrimeResourceHandler#createResource(String resourceName, String libraryName)

and

org.primefaces.application.PrimeResource#getRequestPath()

Available here.

Don't forget to add your implementation to faces-config.xml:

<application>
  <resource-handler>your.package.YourResourceHandlerWrapper</resource-handler>
</application>