我们有一个主要用于智能手机的网络应用程序(由 REST API 支持的单页应用程序)。鼓励用户创建一个主屏幕图标，以便他们可以轻松访问和全屏体验。在我们决定发布应用程序的新版本之前，这一切都很好。一些浏览器正在缓存旧版本并拒绝刷新应用程序，即使用户强制重新加载也是如此。
当 REST API 升级但浏览器仍在使用过时版本的 Web 应用程序时，这是一个严重的问题。我们确实需要浏览器尽可能地缓存内容，但我们也希望在发布新版本时重新加载。
现在我们正在考虑使用 iframe 来解决这个问题。我们创建了一个 index.html，其中包含一个 iframe 和一小段 Javascript，它向 REST 服务器发出 XMLHttpRequest 以确定当前版本。然后使用此版本设置 iframe 的 src-attibute，以便 iframe 加载我们的 Web 应用程序的当前版本。
该解决方案似乎可行，但我想知道是否没有更好的解决方案来解决这个问题。使用 iframe 来解决这个问题是否可以接受，还是会导致其他问题(在某些浏览器/设备上)？
编辑:我们不能使用服务器端脚本，所以auto-versioning对我们来说不是解决方案。
最佳答案
发布我自己问题的解决方案。 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>文件 current-version 包含当前版本(如 v1.0)的目录名称，实际的 Web 应用程序位于该目录中。
虽然感觉有点老套，但这个解决方案可以满足我们的需求。当我们发布新版本时，我们只需将它放在一个新目录(如 v1.1)中并相应地更改当前版本的内容。
编辑
我们最终决定围绕我们的网络应用程序构建原生包装器。这需要更多工作，但让我们可以完全控制应用程序和缓存行为。除此之外，告诉人们从应用商店安装应用比解释如何创建主屏幕图标要容易得多。
关于javascript - 使用 iframe 避免 Web 应用程序的缓存问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41041136/