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:
With that in place, the relevant passage in the logged-out.html file goes from:
To this:
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.
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:
<script>
// 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;
}
</script>To this:
<script>
function refreshMain() {
window.location.href = "/";
}
</script>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.
- SAP Managed Tags:
