Skip to content

Latest commit

 

History

History
98 lines (65 loc) · 4.79 KB

Cache_Buster_for_OpenUI5_91f0809.md

File metadata and controls

98 lines (65 loc) · 4.79 KB
loio
91f080966f4d1014b6dd926db0e91070

view on: demo kit nightly build | demo kit latest release

Cache Buster for OpenUI5

A cache buster allows OpenUI5 to notify the browser to refresh the resources only when the OpenUI5 resources have been changed. As long as they are not changed, the resources can always be fetched from the browser's cache.

Note:

OpenUI5 supports the cache buster concept for Java and ABAP servers and for SAP Business Technology Platform. SAP HANA XS does not support the cache buster concept.

When you want to cache your resources permanently, you simply need to change the URL in the OpenUI5 bootstrap tag from resources/sap-ui-core.js to resources/sap-ui-cachebuster/sap-ui-core.js.

The cache buster mechanism allows to always put the OpenUI5 resources into the browsers cache until a UI library or a web application has been changed. The default behavior of the OpenUI5 resource handler is either to cache the resources for a specific amount of time or alternatively in development mode it is using the 304/NOT MODIFIED mechanism to check the OpenUI5 resources for being up-to-date. Both mechanisms are not optimal in a final, productive scenario - that is the reason for the implementation of the cache buster mechanism. Applications, which want to use the cache buster mechanism, have to explicitly decide to use it.

The cache buster mechanism is part of the resource servlet. In general, requests to JavaScript resources can be handled via the cache buster mechanism. Typically this is used for the initial request for the bootstrap JavaScript:

  <script type="text/javascript" 
  	id="sap-ui-bootstrap"
  	src="resources/sap-ui-cachebuster/sap-ui-core.js"
  	data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table"
	data-sap-ui-theme="sap_horizon"></script>

The bootstrap JavaScript will be included via the URL resources/sap-ui-cachebuster/sap-ui-core.js instead of resources/sap-ui-core.js.

Mechanism

The basic mechanism is implemented in the ResourceServlet. For the request to the bootstrap JavaScript it now serves a JavaScript file with the following content:

(function() {
  var sTimeStamp = '~20120716-0201~';
  var sScriptPath = 'sap\x2dui\x2dcore.js';
  var aScriptTags = document.getElementsByTagName('script');
  for (var i = 0; i < aScriptTags.length; i++) {
    if (aScriptTags[i].src) {
      var iIdxCb = aScriptTags[i].src.indexOf('/sap-ui-cachebuster/');
      if (iIdxCb >= 0 && aScriptTags[i].src.substring(iIdxCb + '/sap-ui-cachebuster/'.length) == sScriptPath) {
        var sBasePath = aScriptTags[i].src.substring(0, iIdxCb);
        sBasePath += '/' + sTimeStamp + '/';
        window["sap-ui-config"] = window["sap-ui-config"] || {};
        window["sap-ui-config"].resourceRoots = window["sap-ui-config"].resourceRoots || {};
        window["sap-ui-config"].resourceRoots[''] = sBasePath;
        document.write('<script type="text/javascript" src="' + sBasePath + sScriptPath + '"></script>')
        break;
      }
    }
  }
})();

This script basically ensures that the global OpenUI5 configuration variable (window["sap-ui-config"]) exists, without modifying any existing values. It defines the resource root of OpenUI5 (the location where OpenUI5 loads all JavaScript modules, controls and control related resources from). Finally, another script tag is added to the page that points to the real boostrap JavaScript. The new resource root and the request path to the bootstrap JavaScript now contain a timestamp. Additionally the cache headers of the responses now look like the following:

Date: Mon, 16 Jul 2012 05:17:54 GMT
Expires: Sun, 14 Jul 2013 05:17:54 GMT
Cache-Control: max-age=315360000, public

By default all cache buster resources will be cached for one year.

Request Flow

When using the cache buster mechanism, the first request must never be cached because it is being used to determine the timestamp / and to finally redirect to the correct script. The following list explains the flow:

  • resources/sap-ui-cachebuster/sap-ui-core.js => NO_CACHE

  • resources/~201207160201~/sap-ui-core.js =>CACHE

Timestamp

If you are interested in the timestamp of the cache buster, you can grab it with the following request:

resources/sap-ui-cachebuster

The response is text/plain with such value: ~20120716-0201~