Static resource serving in connections

In the Customizing styles used in the Connections entry i blogged about how you can change the header color from black to red by making changes in the styles. But one problem is that i had to clear browser cache for my changes to take effect. Now this might be ok in development but you cannot ask end users to clear browser cache every time you change your static resources, so i wanted to figure out why the changes are not getting reflected right away.

• When i checked which file has the definition of lotusBanner class i noticed that it is defined in the http://wpconnections.atech.com/activities/static/20101018.200549/nav/common/styles/defaultTheme/theme.css and when i looked at the resource using the firebug i can see following caching headers
  
  
  
  These two are the caching headers. The value of cache-control header is set to 315360000 milliseconds which is equal to 10 years. Also the Expires header is set to explicit date of 16 Apr 2021 16:57:21 GMT, which is equal to 10 years.
  
Expires Fri, 16 Apr 2021 16:57:21 GMT
Cache-Control public, max-age=315360000, s-maxage=315360000

  


• Then i checked the Firefox cache and i could see that the response of http://wpconnections.atech.com/activities/static/20101018.200549/nav/common/styles/defaultTheme/theme.css is cached for next 10 years and what that means is firefox is not even going to check if server has new version of the theme.css for next 10 years
  
  
  
  Note: It seems that Connection follows the most important client side performance improvement guideline which is to cache the static resources for as long as possible, that must be the reason why connection is fast even though the pages are ritch.
  

If you look at the URL of the theme.css http://wpconnections.atech.com/activities/static/20101018.200549/nav/common/styles/defaultTheme/theme.css you will notice that it has a time stamp. This time stamp comes from LotusConnections config file, there is a versionStamp element in the LotusConnections-config.xml file its value is used in creating URL to the theme.css. Take a look at the LotusConnections-config.xml file on my machine. If you want to force browser to download new resource you will have to change the value of versionStamp element which will change URL to the resource and as a result the browser will download new version of theme.css from server.

 <languageSensitive enabled="false"/>
 <ignorePunctuation enabled="false"/>
 <transactionSetting>
  <attribute key="Transaction_Max" value="20"/>
  <attribute key="Queue_Max" value="10"/>
 </transactionSetting>

 <useRichTextEditorInBookmarklet enabled="false"/>

    <dynamicHosts enabled="false">
        <host href="admin_replace" ssl_href="admin_replace"/>
    </dynamicHosts>

    <resources>
    </resources>    
    
    <versionStamp value="20101018.200549"/>
    
</config> 

• Use the steps defined in Changing connections configuration for checking out the LotusConnections-config.xml file


• Then you can either change the value of the versionStamp element manually or execute the following command to generate new value for the versionStamp element
  
LCConfigService.updateConfig("versionStamp","")

  

After executing the above command you can see the value of versionStamp element in LotusConnections-config.xml file is changed like this


 <useRichTextEditorInBookmarklet enabled="false"/>

    <dynamicHosts enabled="false">
        <host href="admin_replace" ssl_href="admin_replace"/>
    </dynamicHosts>

    <resources>
    </resources>    
    
    <versionStamp value="20110419.173153"/>
    
</config>




• Next step is to check in your changes and synchronize them between nodes using the steps defined in Changing connections configuration


• Restart the server and now try accessing the page you will notice that the page has red header and you dont have to clear the browser cache. If you look at the resource using firebug you will notice the URL of the theme.css is changed like this