Set HTTP headers properly to force caching on JS, CSS and PNG files

Question

How can I tell to GlassFish server, to store all JS, CSS and PNG files into browser cache in order to reduce HTTP GET requests?

I am using JSF and PrimeFaces.

Answer 1

Just make use of JSF builtin resource handler. I.e. use <h:outputStylesheet name>, <h:outputScript name> and <h:graphicImage name> with files in /resources folder instead of "plain vanilla" <link rel="stylesheet">, <script> and <img>.

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="images/logo.png" />

This way you don't need to worry about resource caching at all. JSF builtin resource handler has already set the necessary response headers. The expiration time defaults already to 1 week.

In Mojarra you can control the expiration time by the following context parameter (the value is in millis):

<context-param>
    <param-name>com.sun.faces.defaultResourceMaxAge</param-name>
    <param-value>3628800000</param-value> <!-- 6 weeks. -->
</context-param>

And in MyFaces:

<context-param>
    <param-name>org.apache.myfaces.RESOURCE_MAX_TIME_EXPIRES</param-name>
    <param-value>3628800000</param-value> <!-- 6 weeks. -->
</context-param>

See also:

• How to reference CSS / JS / image resource in Facelets template?
• What is the JSF resource library for and how should it be used?