使用单页应用程序进行缓存答案

【问题标题】：Caching with single-page application使用单页应用程序进行缓存
【发布时间】：2015-12-05 03:28:37
【问题描述】：

我有一个 OpenUI5 应用程序；我的应用只有一个 htlm 页面（index.html）、一些 js 文件（用于逻辑控制器）和一些 xml 文件（用于视图）。

该应用是单页应用；这是我的index.html 起始页：

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

这是我的manifest文件app.appcache（我在每个新版本中都会更改它）

CACHE MANIFEST
#APP VERSION 1.0.4-rc4

#insert here files to cache

#insert here files to NOT cache
NETWORK:
*

好的！但是现在我将应用程序复制到我的服务器上，然后 BOOM！某些页面已重新加载，但其他页面没有...（例如，我有一个登录 XML 视图，其中显示已更新的发布版本和未更新的设置对话框的 XML）为什么我有这种行为？我希望浏览器在每次重新加载时重新加载每个文件

附：如果我按 F5 手动重新加载应用程序，问题仍然存在。如果我在 index.html 文件中添加这些元标记，问题仍然存在

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

浏览器强制重新加载整个应用的唯一模式是手动取消缓存：

【问题讨论】：

又是什么问题？您正在谈论使用 F5 刷新浏览器。如果应用缓存按预期完成，则 F5 刷新不应从服务器获取新版本。这就是应用缓存的重点！
测试时，我通常会打开 chrome 控制台并在 Network 标签中勾选 disable cache 框
也许我发现了问题..link红色消息说：“重要：不要在缓存清单文件中指定清单本身，否则几乎不可能通知浏览器新清单可用。”也许在过去我已经将 appcache 文件插入到 appcache 中...... O_o

标签： single-page-application browser-cache sapui5 cache-manifest manifest.cache

【解决方案1】：

如果您可以在您的 SPA 中包含 Java Servlet 过滤器，这是一个可行的解决方案：CorrectBrowserCacheHandlerFilter.java

基本上，当您的浏览器请求静态文件时，服务器会将每个请求重定向到同一个请求，但带有一个哈希查询参数（例如?v=azErT），该参数取决于目标静态文件的内容。

这样做，浏览器将永远不会缓存在您的 index.html 中声明的静态文件（因为总是会收到 302 Moved Temporarily），但只会缓存具有哈希版本的文件（服务器将回答 @987654325 @为他们）。所以浏览器缓存将有效地用于那些具有哈希版本的静态文件。

免责声明：我是CorrectBrowserCacheHandlerFilter.java的作者。

【讨论】：