Prevent Browser Caching of UI5 Application Resources

Question

We have an SAPUI5 App deployed on SAP PO. The problem is that whenever we do changes and deploy the new version of our application, the changes are not reflected and we need to do a Hard Reload and Clear browser Cache to fetch new changes.

This is causing a lot of issues as we cannot ask clients to clear cache after every change.

Below are the unsuccessful methods we tried so far:

1. Enabling "resources/sap-ui-cachebuster/sap-ui-core.js" in SAPUI5 bootstrap.

2. Using 'Application Cache buster' for application resource ( using sap-ui-cachebuster-info.json)

3. Setting HTML header to keep no cache:

<meta http-equiv='cache-control' content='no-cache, no-store, must-revalidate'>
<meta http-equiv='Expires' content='-1'>
<meta http-equiv='Pragma' content='no-cache'>

4. Clear cookies with below code:

document.cookie.split(";").forEach(function(c) { 
document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
});

None of the above solutions have worked so far. This is what we see in Networks tab of Chrome:

NOTE: Application is deployed on SAP PO 7.4 ( JAVA Stack)

Answer 1

We had the same issue than you on SAP MII and I have spent months with several OSS Calls for SAP to provide an acceptable solution.

They did so in the SP3 of SAP MII (we haven't updated yet but I hope their correction is right), but this will not apply in your case as you're on SAP PO but it's still a Java Stack.

So I think you should open an OSS Call, recommending to SAP to consult SAP Notes:

• 2463286 - Issues when reloading JavaScript files

• 2459768 - Force browsers to reload modified resource files

They will probably redirect you to the following stack overflow topic: http://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files

But this is only a work around, SAP web server on Java stack doesn't seem to be working correctly and they have to provide a correction.

Hope this will help you.

EDIT

Hi,

Here is an update, there is a work around that we sometime use. We have a URL parameter which is used to identify if a reload of the page is needed. See below a JS snippet that we embed the index.html page of the SAPUI5 app.

Hope this will help you.

    <script>

window.onload = function () {

    version = undefined;
    fCheckVersionMatch = false;

    onInit();
};

/***************************************************************************
 * Function launch when we start the application it test
 *  - if the Reload parameters is set in the url
 *      - if we are loading an hold application with a false reload value
 ****************************************************************************/
var onInit = function() {
    checkParamReload();
};

/***************************************************************************
 * Check in the url if there is the reload value and if this value is less 
 * than the difference with the date now => avoid when using favorite link
 * to load a previous version with an incorrect time stamp
 ****************************************************************************/
var checkParamReload = function() {

    var sUrlParameters = window.top.document.location.search;
    var regexReload = /(\?|&)reload=([^&]*)/;
    var aReload = sUrlParameters.match(regexReload);
    var nTime = aReload == null ? NaN : parseInt(aReload[2]);

    if ( isNaN(nTime) || Math.abs(Date.now() - nTime) > 60000 ) {               
        // In case no reload tag is present or it's value is more than 1 minute ago, reload page
        reloadPage(true); // True means force reload => reset retry count.
    }

};

/***************************************************************************
 * Reload page and make sure the reload param is updated.
 * If force reload is used, retry count is resetted, otherwise it is
 * it is incremented up to a limit, which - in case it is reached - stops
 * the reload process and instead display an error message.
 ****************************************************************************/
var reloadPage = function (bForce) {

    var retries = 0;
    var oLocation = window.top.document.location;

    var sSearch = oLocation.search;
    sSearch = queryReplace(sSearch, "reload", _ => Date.now());
    if (bForce) {
        sSearch = queryReplace(sSearch, "retry", _ => 0);
    } else {
        sSearch = queryReplace(sSearch, "retry", function (n) {
            if (isNaN(parseInt(n))) {
                return 0;
            } else {
                retries = parseInt(n);
                return retries + 1;
            }
        });
    }

    if (retries < 10) {
        // Reload Page
        window.top.document.location.replace(oLocation.origin + oLocation.pathname + sSearch + oLocation.hash);
    } else {
        // Display error
        document.getElementById('Error').style.display = "block";
    }

};

var queryReplace = function (sQuery, sAttribute, fnReplacement) {
    // Match the attribute with the value
    var matcher = new RegExp(`(\\?|&)${ sAttribute }=([^&]*)`);
    var sNewQuery = sQuery.length < 2 ? `?${ sAttribute }=` : sQuery;
    if (sNewQuery.search(matcher) < 0) {
        // If we could not match, we add the attribute at the end
        sNewQuery += "&" + sAttribute + "=" + fnReplacement("");
    } else {
        sNewQuery = sNewQuery.replace(matcher, (_, delim, oldVal) => delim + sAttribute + "=" + fnReplacement(oldVal));
    }
    return sNewQuery;
}

</script>