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

时间:2016-12-08 13:52:15

标签: javascript html iframe browser-cache

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

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

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

解决方案似乎有效,但我想知道是否有更好的解决方案来解决这个问题。是否可以使用iframe来解决此问题,还是会导致其他问题(在某些浏览器/设备上)?

修改:我们无法使用服务器端脚本,因此auto-versioning不是我们的解决方案。

2 个答案:

答案 0 :(得分:1)

将解决方案发布到我自己的问题中。 index.html如下所示:



output = [["this", 4, 'THIS'], ["is", 2, "IS"], ["a", 1, "A"], ["fun", 3, "FUN"], ["day", 3, "DAY"]]




文件current-version包含当前版本的目录名(如v1.0),实际的Web应用程序驻留在该目录中。

即使感觉有点hackish,这个解决方案也能满足我们的需求。当我们发布新版本时,我们只需将其放在一个新目录(如v1.1)中并相应地更改当前版本的内容。

修改

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

答案 1 :(得分:0)

您不需要iFrame。

你可以通过javascript实现它。 从iframe创建XMLHttpRequest。 每当您通过XMLHttpRequest调用REST API请求映像时,请在请求URL中添加一个查询String参数,其值将是一个随机数。应解决您的缓存问题。

例如,像这样,

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

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