Caching with single-page application

问题

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

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>

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

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

回答1:

If you can include Java Servlet Filter in your SPA, here is a working solution: CorrectBrowserCacheHandlerFilter.java

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.

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.

Disclaimer: I'm the author of CorrectBrowserCacheHandlerFilter.java.

来源：https://stackoverflow.com/questions/32474845/caching-with-single-page-application

标签

single-page-application

browser-cache

sapui5

cache-manifest

manifest.cache