I am really struggling with the set up of application cache buster for our SAPUI5 application. It is running as a standalone application on an ABAP system. However, every time we change the UI, we have to delete the browser cache to see the changes. This is why I decided to set up the application cache buster, but it doesn't seem to work at all for us. My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Name</title>
<script
id="sap-ui-bootstrap"
src="/sap/public/bc/ui5_ui5/resources/sap-ui-cachebuster/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-app-cache-buster="./"
data-sap-ui-resourceroots='{
"<app_path>": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted"
></script>
</head>
<body class="sapUiBody">
<div
data-sap-ui-component
data-name="<app_path>"
data-id="container"
data-settings='{"id" : "AppName"}'
></div>
</body>
</html>
My package.json file looks like this:
{
"name": "appname",
"version": "1.0.0",
"description": "Description",
"private": true,
"type": "module",
"scripts": {
"ts-typecheck": "tsc --noEmit",
"start": "ui5 serve -o index.html",
"start-cdn": "ui5 serve -o index-cdn.html --config ui5-dist.yaml",
"start-flp": "fiori run --open \"test/flpSandbox.html?sap-ui-xx-viewCache=false#AppName-display\"",
"start-noflp": "fiori run --open \"index.html?sap-client=075&sap-ui-xx-viewCache=false\"",
"lint": "eslint webapp ",
"build-dev": "ui5 build dev --clean-dest --include-task=generateCachebusterInfo",
"build": "ui5 build --clean-dest --include-task=generateCachebusterInfo",
"format": "prettier --write \"**/*.(ts|js|json|yml|yaml|xml)\"",
"ncu": "ncu",
"ncu-upgrade": "ncu -u",
"deploy": "npm run build-dev && ui5-deployer deploy --config ./ui5-deploy.yaml"
},
"devDependencies": {
"@babel/cli": "7.21.5",
"@babel/core": "7.21.8",
"@babel/preset-env": "7.21.5",
"@babel/preset-typescript": "7.21.5",
"@odata2ts/odata2ts": "^0.31.0",
"@sap-ux/ui5-middleware-fe-mockserver": "2",
"@sap/ux-ui5-tooling": "1.10.4",
"@sapui5/types": "1.120.0",
"@types/jquery": "^3.5.16",
"@types/openui5": "^1.113.0",
"@types/qunit": "2.19.5",
"@types/sinon": "10.0.14",
"@typescript-eslint/eslint-plugin": "5.59.2",
"@typescript-eslint/parser": "5.59.2",
"@ui5/cli": "^3.11.3",
"eslint": "8.39.0",
"eslint-plugin-ui5": "0.1.0",
"npm-check-updates": "16.10.9",
"typescript": "5.0.4",
"ui5-deployer": "1.1.1",
"ui5-middleware-livereload": "0.8.2",
"ui5-middleware-simpleproxy": "0.9.7",
"ui5-tooling-transpile": "0.7.8"
},
"ui5": {
"dependencies": [
"@sap/ux-ui5-tooling",
"ui5-tooling-transpile",
"@sap-ux/ui5-middleware-fe-mockserver",
"ui5-middleware-simpleproxy",
"ui5-middleware-livereload"
]
}
}
After the build, the sap-ui-cachebuster-info.json is generated and looks like this: enter image description here
Every time, I deploy a change, I execute this report: /ui5/app_index_calculate and yet the change does not appear until I manually delete the browser cache. Can you please advice what I could be doing wrong?
