Skip to Content

Hi,

As we all know SAPUI5 loads our code files on demand (ajax calls).

The files are loaded from cache (if any) which helps performance but can also cause problems if we updated the code files (the user must clear browser cache).

SAP GW has a builtin solution application cache buster:
https://help.sap.com/saphelp_uiaddon20/helpdata/en/ff/7aceda0bd24039beb9bca8e882825d/content.htm?no_cache=true

However, there are cases that we’re not using SAP GW (in my case the SAPUI5 apps are deployed to standard SAP J2EE server) and we want to prevent cache when deploying new app version to production environment.

We need to perform these steps:
1) Create a variable (at window level) with unique value in our index.html

2) Under ‘Web Content’ we need to create folder with the same unique value from step 1

3) use jQuery.sap.registerModulePath in order to load files from our new path (also in index.html)

We use jQuery.sap.registerModulePath for all our sub folders which is under folder from step (2)

4) Last but not least: since we don’t want to change the link of our app (it doesn’t make sense) the index file is outside our new folder. so we create a new file: indexNoCache.html which add timestamp as parameter and redirects to index.html (this prevents cache)

 

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
</head>

<body>
<script>
var sViewName = getParameterByName('viewName');
var sTimestamp = Date.now().toString();

var sLink = "index.html?viewName=" + sViewName + "&ts=" + sTimestamp;

location.href = sLink;



function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}

</script>
</body>
</html>

 

***
The viewName part is there in case we want to start our app from a specific view.
In this case we’ll add the following code to our component.js file ‘init’ function:
UIComponent.prototype.init.apply(this, arguments);

var sViewName = jQuery.sap.getUriParameters().get("viewName");
if (sViewName) {
var hashChanger = sap.ui.core.routing.HashChanger.getInstance();
hashChanger.setHash(sViewName);
}

***

One of the downside of this solution is that when using mimes (images etc) we need to do it on controller level and not on view level because if we’ll use view level we’ll need to hardcoded the value from step (1) which is not good.

In order to solve it we’ll do the following from our controller code (for example setting icon):

var oLogo = this.byId("LogoImg"); ('this' controller or view)
oLogo.setSrc("./" + window.clalitSterileSupplyAppVer + "/images/Logo.png");

5) In order to run the app:
http://<server>:<port>/appName/indexNoCache.jsp

Start from specific view:
http://<server>:<port>/appName/indexNoCache.jsp?viewName=myCusomView (myCustomView was defined in routing section of manifest.json).

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply