Question

我有一个MEAN堆栈网站（单页面应用程序），并确保浏览器缓存静态文件，如下所示：

var app = express(); //express server
app.use(express.static(__dirname + "/public", { maxAge: 86400000*30 }));
app.get("*", function(req, res){ res.sendFile(__dirname + "/public/index.html"); });

现在在index.html我通常会链接到我的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="/framework/css/main.min.css?version=1.9">
<script type="text/javascript" src="/framework/js/min/app.min.js?version=1.7"></script>

注意文件名末尾的版本控制号。现在，如果我更新CSS或JS，我只需上传我的新文件并更改版本控制号。这应该在页面刷新时更新缓存（和确实）。

问题是，如果用户只是再次访问该网站（并且没有点击刷新），或者如果他们在移动设备上访问过该网站并且没有关闭浏览器，则只需在另一天再次打开它，他们没有获得新文件 - 他们获得了缓存版本。

这给我带来了各种各样的问题。有没有办法强制在更新时提供和缓存新文件？我每1或2周进行一次更新，对于网站速度，我希望在此期间缓存文件。

Answer 1

Google Inbox会向“请刷新您的页面 - 提供新版本”提供一个小通知。

也许你应该尝试这种方法。

动态重装不是小菜一碟......看看这些也是

Is there an easy way to reload css without reloading the page?

Dynamically reload local Javascript source / json data

Answer 2

即使使用更改的文件名进行简单刷新，它也不会保持缓存状态。我甚至认为处理起来不是很简单，特别是在重新加载JS东西，库等等时......

我的Chrome移动浏览器甚至在没有我兴趣的情况下刷新网站，只是因为最后一次通话是一天前。

Answer 3

您可以使用Page Visibility API检测用户何时返回您的网页。如果经过这么多时间，您可以手动刷新它。

var hasBeenXDays = (function(){
  var offset = Date.now();
  var day = 1000 * 60 * 60 * 24;
  return function(s){
    return day*s + offset <= Date.now();
  };
})();
document.addEventListener("visibilitychange", function handleVisibilityChange() {
  if (!document.hidden && hasBeenXDays(14)) {
    window.location.reload(true);
  }
}, false);

在所有浏览器上强制缓存更新

3 个答案: