caching - 防止 UI5 应用程序资源的浏览器缓存

Question

我们在 SAP PO 上部署了一个 SAPUI5 应用程序。问题是，每当我们进行更改并部署应用程序的新版本时，这些更改都不会反映，我们需要执行硬重载和清除浏览器缓存来获取新的更改。

这会导致很多问题，因为我们不能要求客户端在每次更改后清除缓存。

以下是我们迄今为止尝试的不成功的方法：

在 SAPUI5 引导程序中启用“resources/sap-ui-cachebuster/sap-ui-core.js”。
对应用程序资源使用“Application Cache buster”（使用 sap-ui-cachebuster-info.json）
将 HTML 标头设置为不保留缓存：

<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'>

使用以下代码清除 cookie：

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

到目前为止，上述解决方案都没有奏效。这是我们在 Chrome 的 Networks 选项卡中看到的内容：

注意：应用程序部署在 SAP PO 7.4（JAVA Stack）上

score 2 · Accepted Answer

我们在 SAP MII 上遇到了与您相同的问题，我花了几个月的时间为 SAP 进行了几次 OSS 调用，以提供可接受的解决方案。

他们在 SAP MII 的 SP3 中这样做了（我们尚未更新，但我希望他们的更正是正确的），但这不适用于您的情况，因为您使用的是 SAP PO，但它仍然是一个 Java 堆栈。

所以我觉得你应该打开一个OSS Call，推荐SAP去查阅SAP Notes：

他们可能会将您重定向到以下堆栈溢出主题： http ://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files

但这只是一种解决方法，Java 堆栈上的 SAP Web 服务器似乎无法正常工作，他们必须提供更正。

希望这会帮助你。

编辑

你好，

这是一个更新，我们有时会使用一种解决方法。我们有一个 URL 参数，用于确定是否需要重新加载页面。下面是我们嵌入 SAPUI5 应用程序的 index.html 页面的 JS 片段。

希望这会帮助你。

    <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>

caching - 防止 UI5 应用程序资源的浏览器缓存

1 回答 1

Related

Reference