单页应用程序缓存 [英] Caching with single-page application
问题描述
我有一个OpenUI5应用；我的应用程序只有一个htlm页面（index.html），一些js文件（用于逻辑控制器）和一些xml文件（用于视图）。
I have an OpenUI5 app; my app have only one htlm page (index.html), some js file (for the logic-controller) and some xml file (for the view).
该应用程序是单页应用程序；这是我的 index.html 起始页：
The app is a single-page application; this is my index.html start page:
<!DOCTYPE html>
<html manifest="app.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<!--<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />-->
<title>My App</title>
<!-- UI5 Bootstrap with OpenUI5 -->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/openui/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{
"ui5bp": "./",
"model": "./model"
}'
>
</script>
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
new sap.m.Shell("Shell", {
showLogout : false,
app : new sap.ui.core.ComponentContainer({
name : 'ui5bp'
}),
homeIcon : {
'phone' : "img/57_ogo.jpg",
'phone@2' : "img/114_logo.jpg",
'tablet' : "img/72__logo.jpg",
'tablet@2' : "img/144_logo.jpg",
'precomposed': false,
'favicon' : "img/favicon.ico"
}
}).placeAt('root');
</script>
</head>
<body class="sapUiBody" id="root">
</body>
</html>
这是我的清单文件 app。 appcache （我会在每个新版本中更改）
and this is my manifest file app.appcache (I change it at each new version)
CACHE MANIFEST
#APP VERSION 1.0.4-rc4
#insert here files to cache
#insert here files to NOT cache
NETWORK:
*
好！但是现在我将应用程序复制到服务器和BOOM上了！有些页面被重新加载，而其他页面则没有...（例如，我有一个登录XML视图，其中显示了已更新的发行版，而一个设置对话框的XML却未更新）
为什么有此页面行为？我希望浏览器在每次重新加载时重新加载每个文件
OK! But now I copy the app on my server and BOOM! some page are reloaded but others do not... (for example I have a login XML-view where I show the release version which is updated and a XML for a setting dialog which is not updated) Why I have this behavior? I would like that the browser reload each file at each reloading
P.S。
如果我在F5之前手动重新加载应用程序，问题仍然存在。
如果我在index.html文件上添加这些元标记，问题仍然存在
P.S. If I reload manaully the app by F5 the problem remains. If I add on the index.html file these meta-tag the problems remains
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
唯一强制浏览器重新加载整个应用程序的模式是手动取消缓存：
The only mode to force the reloading of the whole app by the browser is cancel the cache manually:
推荐答案
如果您可以在SPA中包含Java Servlet过滤器，则可以使用以下解决方案： CorrectBrowserCacheHandlerFilterFilter.java
If you can include Java Servlet Filter in your SPA, here is a working solution: CorrectBrowserCacheHandlerFilter.java
基本上，当您的浏览器请求静态文件时，服务器会将每个请求重定向到相同的请求，但带有哈希查询参数（？v = azErT ），具体取决于目标静态文件的内容。
Basically, when your browser requests the static files, the server will redirect every requests to the same one but with a hash query parameter (?v=azErT for example) which depends on the content of the target static file.
这样做，浏览器将永远不会缓存例如，在 index.html 中声明的静态文件（因为将始终收到 3 02临时移动），但仅缓存具有哈希版本的缓存（服务器将为它们回答 200 ）。因此，浏览器缓存将有效地用于具有哈希版本的静态文件。
Doing this, the browser will never cache the static files declared in your index.htmlfor example (because will always received a 302 Moved Temporarily), but will only cache the ones with the hash version (the server will answer 200 for them). So the browser cache will be used efficiently for those static files with hash version.
免责声明：我是 CorrectBrowserCacheHandlerFilter.java 的作者code>。
Disclaimer: I'm the author of CorrectBrowserCacheHandlerFilter.java.
这篇关于单页应用程序缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
