title: Caching with single-page application
body: <p>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).</p>
  
  <p>The app is a single-page application; this is my <code>index.html</code> start page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html manifest="app.appcache"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;!--&lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt;
      &lt;meta http-equiv="cache-control" content="max-age=0" /&gt;
      &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
      &lt;meta http-equiv="expires" content="0" /&gt;
      &lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /&gt;
      &lt;meta http-equiv="pragma" content="no-cache" /&gt;--&gt;
  
      &lt;title&gt;My App&lt;/title&gt;
  
      &lt;!-- UI5 Bootstrap with OpenUI5 --&gt;
      &lt;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"
               }'
          &gt;
      &lt;/script&gt;
  
  
  
      &lt;!-- Custom Styles --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  
     &lt;script&gt;
  
          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');
     &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="sapUiBody" id="root"&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is my <strong>manifest</strong> file <code>app.appcache</code> (I change it at each new version)</p>
  
  <pre><code>CACHE MANIFEST
  #APP VERSION 1.0.4-rc4
  
  #insert here files to cache
  
  #insert here files to NOT cache
  NETWORK:
  *
  </code></pre>
  
  <p>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>
  
  <p>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</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt;
      &lt;meta http-equiv="cache-control" content="max-age=0" /&gt;
      &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
      &lt;meta http-equiv="expires" content="0" /&gt;
      &lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /&gt;
      &lt;meta http-equiv="pragma" content="no-cache" /&gt;
  </code></pre>
  
  <p>The only mode to force the reloading of the whole app by the browser is cancel the cache manually:</p>
  
  <p><a href="https://i.stack.imgur.com/ny9K5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ny9K5.png" alt="enter image description here"></a></p>