Angular应用程序客户端caching

问题

我们使用Angular.js来处理从Express服务器提供的前端应用程序。

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

我们也注意到，当我们在线推送新版本的应用程序时，我们必须进行硬刷新 ，才能看到新的变化。

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

技术细节

我们用来服务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文件都有一个与其名称不同的唯一string。 （因此，这也会改变index.html页面）。

感谢您的时间和帮助。

Answer 1

你的问题是，你需要处理从gzippocaching！

你的代码中发生的事情是你的定制中间件要写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文档的其他选项

希望有所帮助，干杯！