Prevent JS and CSS caching in APEX

A big issue in any WEB development is how to avoid unwanted cashing of CSS and java script files. It is more then famous situation when developer upload new js/css file on server and then has to ask user to make Ctrl+F5 ... to load new file versions on client side, forcing to replace older ones.

The situation is more accentuated when you enable Server Cache/Cache Page option in Apex page definition.

The solution

Fortunately, in Apex (tested on 4.1 with Embeded PL/SQL gateway), there is one nice trick that help developers to ensure proper file caching by defining things on server side, and avoid dependency from client side.

Suppose we want to ensure that my_js.js and theme_V2.css files should be ensured from any kind of caching.

1. First you need to define unrestricted Application item. In mine case I'll call it "G_FILE_VERSION".
2. Then assign G_FILE_VERSION value to something that is js syntactical correct (i.e. "v1000"). This can be done as static assignment or by PLSQL computation/process.
   PLSQL computation/process might be defined by coding in Apex directly or by calling some package from database. Package option is the one I prefer because interaction with database is much more easy and require only sqlplus for that.
3. Now in page template (or page definition) place next code, which will load java script file

   <script type="text/javascript" src="#WORKSPACE_IMAGES#my_js.js&p_inline=&G_FILE_VERSION.">
   

   As you see &p_inline=G_FILE_VERSION part is added after classic definition

With this you ensure that by changing value G_FILE_VERSION should result in new download of file, because this will represent new value!

Similar for css is next syntax:

<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_15/theme_V2.css&p_inline=&G_FILE_VERSION." type="text/css" />

Hope this helps someone.

Cheers!