使用 iframe 避免 Web 应用程序的缓存问题

Question

我们有一个主要用于智能手机的 Web 应用程序（由 REST API 支持的单页应用程序）。鼓励用户创建一个主屏幕图标，以便他们可以轻松访问和全屏体验。在我们决定发布应用程序的新版本之前，这一切都很好。一些浏览器正在缓存旧版本并拒绝刷新应用程序，即使用户强制重新加载也是如此。

当 REST API 升级但浏览器仍在使用过时版本的 Web 应用程序时，这是一个严重的问题。我们确实需要浏览器尽可能地缓存内容，但我们也希望在发布新版本时重新加载。

现在我们正在考虑使用 iframe 来解决这个问题。我们创建了一个 index.html，其中包含一个 iframe 和一小段 Javascript，它向 REST 服务器发出 XMLHttpRequest 以确定当前版本。然后使用此版本设置 iframe 的 src-attibute，以便 iframe 加载我们的 Web 应用程序的当前版本。

这个解决方案似乎可行，但我想知道是否有更好的解决方案来解决这个问题。使用 iframe 来解决这个问题是否可以接受，还是会导致其他问题（在某些 browsers/devices 上）？

编辑： 我们不能使用服务器端脚本，所以 auto-versioning 不是我们的解决方案。

Answer 1

您不需要 iFrame。

可以通过javascript实现。像您在 iframe 中所做的那样创建一个 XMLHttpRequest。每当您通过 XMLHttpRequest 调用 REST API 来请求图像时，在请求 url 中添加一个查询字符串参数，其值将是一个随机数。应该可以解决您的缓存问题。

例如，像这样，

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

同样，我不知道您的 REST API 是如何设计的，但这样做可能不是问题。

Answer 2

发布我自己的问题的解决方案。 index.html 看起来像这样：

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

当前版本文件包含当前版本（如 v1.0）的目录名称，实际的 Web 应用程序位于该目录中。

虽然感觉有点老套，但这个解决方案可以满足我们的需要。当我们发布新版本时，我们只需将它放在一个新目录（如 v1.1）中，并相应地更改 current-version 的内容。

编辑

我们最终决定围绕我们的 Web 应用程序构建本机包装器。这需要更多工作，但让我们可以完全控制应用程序和缓存行为。除此之外，告诉人们从应用商店安装应用比解释如何创建主屏幕图标要容易得多。

使用 iframe 避免 Web 应用程序的缓存问题

Avoid cache issues for web application with iframe

html

javascript

iframe

browser-cache