Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
In my last post, I described a trick I'd developed to tighten up SAPUI5 user experience when using an Approuter front-end. I set up the UI code to automatically log out if the user was inactive long enough to get really close to having the Approuter's session expire.

That technique works well, but it required me to trick the browser so as to avoid caching the application's main index.html page.  It turns out there is a cleaner way to do that using that latest versions of Approuter.  I'll describe that new technique here.

In the code from my last blog post, the logged-out.html page included a button that, when pressed by the user, returns to the application:

The original version of that code included injecting a guaranteed-unique ?force= parameter on the URL. The reason for doing taking that approach is that many browsers, including Chrome on my Mac, won't honor any Cache-Control directives that might be embedded directly in the HTML content.

But Chrome will honor an HTML Cache-Control HTTP header. Approuter now supports setting such Cache-Control headers.  To utilize that feature, all that's required is to alter the description for handling the index.html file in the xs-app.json configuration file:
"source": "^/index.html$",
"localDir": "resources",
"authenticationType": "xsuaa",
"cacheControl": "no-cache"

With that in place, the relevant passage in the logged-out.html file goes from:
// This function forces a reload of the destination page from the server. It does this by
// supplying a unique argument value with each new invocation.
function refreshMain() {
var unique = new Date().getTime().toString(16);
window.location.href = "/?force="+unique;

To this:
function refreshMain() {
window.location.href = "/";

Easy, right?

You'll find the full documentation for XSA Approuter configuration syntax here.  As the documentation points out, the cacheControl directive only applies to static HTML content.  Still, that's just what we needed here and it might be useful in other situations for your own projects.