2

We have a web application (a single page app backed by a REST API) that is mainly used on smart phones. Users are encouraged to create a homescreen icon so that they have easy access and a full screen experience. This worked fine until we decided to release a new version of our application. Some browsers are caching the old version and refuse to refresh the application, even when the user forces a reload.

This is a serious problem when the REST API is upgraded but the browser is still using an outdated version of the web app. We do need the browser to cache things whenever possible, but we also want a reload when a new version has been released.

Now we are considering to use an iframe to fix this problem. We created an index.html that contains an iframe and a small piece of Javascript that does an XMLHttpRequest to the REST-server to figure out the current version. This version is then used to set the src-attibute of the iframe so that the iframe is loaded with the current version of our web application.

The solution seems to work but I was wondering if there isn't a better solution to this problem. Is it acceptable to use an iframe to solve this problem or will it cause other problems (on some browsers/devices)?

Edit: We can't use server side scripting, so auto-versioning is not a solution for us.

Community
  • 1
  • 1
Gert-Jan
  • 752
  • 1
  • 8
  • 21
  • What type of files are you not wanting cached? What type of application is this? ( php, .net, etc. ) – Neo Dec 08 '16 at 14:00
  • Possible duplicate of [How to force browser to reload cached CSS/JS files?](http://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files) – Neo Dec 08 '16 at 14:02
  • Can you show the API call? – Sudhansu Choudhary Dec 08 '16 at 14:06
  • 1
    The files that we want to reload are html, javascript, css and images. I have seen the [auto-versioning](http://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files) answer but we can't use any server side scripting. Also, if the browser caches the main index.html, it will never see the updated version parameter. – Gert-Jan Dec 08 '16 at 14:29
  • I think what your doing currently based on your environment is acceptable. – Neo Dec 08 '16 at 14:53
  • We are going to do a pilot with the iframe-solution. I will update my question with our findings. – Gert-Jan Dec 08 '16 at 17:07

2 Answers2

1

Posting the solution to my own question. The index.html looks like this:

<html>
<head>
 <style>
  body {
   margin: 0px;
  }
  
  iframe {
   overflow: hidden;
   height: 100vh;
   width: 100vw;
   border: none;
  }
 </style>
</head>
<body>

 <iframe id="content"></iframe>

 <script>
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    var src = xmlHttp.responseText + "/index.html";
    document.getElementById("content").setAttribute("src", src);
   }
  }
  xmlHttp.open("GET", "current-version", true);
  xmlHttp.send(null);
 </script>
</body>
</html>

The file current-version contains the directory name of the current version (like v1.0) and the actual web application resides in that directory.

Even though it feels a bit hackish, this solution does what we need. When we release a new version, we simply put it in a new directory (like v1.1) and change the contents of current-version accordingly.

EDIT

We finally decided to build native wrappers around our web-application. It's a bit more work but gives us full control over the app and the caching behaviour. Besides that, it's much easier to tell people to install the app from the app store than to explain how to create a homescreen icon.

Gert-Jan
  • 752
  • 1
  • 8
  • 21
0

You would not be needing an iFrame.

You can achieve it through javascript. Create a XMLHttpRequest as you are doing from the iframe. Whenever you request for the image by calling the REST API through the XMLHttpRequest, add a query String parameter in the request url whose value is going to be a random number. Should solve your caching issues.

Example, something like this,

var url = yourexistingurl  + "&randomid=" + Math.random();

Again, I don't know how your REST API is designed, but doing this might not be an issue.

Sudhansu Choudhary
  • 3,322
  • 3
  • 19
  • 30