Angular应用程序客户端缓存

Question

问题

我们正在使用Angular.js作为从Express服务器提供的前端应用程序。

我们的一些用户遇到了应用程序的随机问题，但当他们清除浏览器的缓存时，问题就解决了。

我们还注意到，当我们在线推送新版本的应用程序时，我们必须硬刷新才能看到新的更改。

我们如何确保在推送新版本的应用时，所有用户都会看到新的更新版本？

技术细节

我们用于为Angular App提供服务的快递代码：

var app = express();

app.use(function(req, res, next) {
    var schema = req.headers["x-forwarded-proto"];

    // --- Do nothing if schema is already https
    if (schema === "https")
        return next();

    // --- Redirect to https
    res.redirect("https://" + req.headers.host + req.url);
});

app.use(function(req, res, next) {
   res.setHeader("Cache-Control", "public, max-age=3600");
   return next();
});

app.use(express.logger('dev'));
app.use(gzippo.staticGzip("" + __dirname + "/dist"));

//prerender is used for SEO
app.use(prerender);
app.use('/', express.static(__dirname + '/'));

//HTML5 mode
app.use(function(request, response, next) {
   response.sendfile(__dirname + '/dist/index.html');
});

app.listen(process.env.PORT || 5000);

如您所见，我们使用中间件将Cache-Control max-age设置为1小时。当我们使用curl检查标头时，我们得到以下内容（正确的Cache-Control值）。

但是，当我们检查Chrome中的响应标头时，Cache-Control max-age设置为一周。

同样非常重要的是，我们使用Grunt-rev，以便每次部署应用程序时，CSS和JS文件都会在其名称前面添加一个不同的唯一字符串。 （因此，这也将改变index.html页面。）

感谢您的时间和帮助。

Answer 1

你的问题是你需要处理来自gzippo的缓存！

您的代码中发生的事情是您的自定义中间件将编写Cache-Control标头，但在gzippo处理请求后，它将重新编写Cache-Control标头并将其设置为1周（根据doc的默认值）。您的中间件已被“忽略”。

您需要做的是

1. 删除注入Cache-Control标题的自定义中间件。

2. 更新gzippo调用，如下所示

   app.use(gzippo.staticGzip("" + __dirname + "/dist", {
     clientMaxAge: 3600 * 1000 // 1 hour, it seems gzippo takes milliseconds, not seconds
   }));
   

你已经完成了：）

有关其他信息，您可以查看gzippo documentation

的其他选项

希望有所帮助，干杯！