This site has been destroyed by Google forced upgrade to new way of WEB site.
All files links are not working. Many images has been lost in conversation.
Have to edit 190 pages manually. Will try to do ASAP but for this I need time ...
THANK YOU GOOGLE !

Wednesday, August 5, 2015

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!

2 comments :

  1. This is the way I always do it. :)
    Item is populated from DB sequence and I always have 2 application items. One for CSS and the other one for JS.

    Br,
    Marko

    ReplyDelete
    Replies
    1. Marko,
      thank you on your post. Appreciate you as an really well experienced Apex consultant.
      Brg
      Damir

      Delete

Zagreb u srcu!

Copyright © 2009-2018 Damir Vadas

All rights reserved.


Sign by Danasoft - Get Your Sign