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页面)。
感谢您的时间和帮助。
你的问题是,你需要处理从gzippocaching!
你的代码中发生的事情是你的定制中间件要写Cache-Control
头,但是在gzippo处理请求之后,它将重写Cache-Control
头并将其设置为1周(默认根据doc )。 您的中间件已被“忽略”。
你需要做的是
- 删除注入
Cache-Control
标头的自定义中间件。 -
更新gzippo电话如下
app.use(gzippo.staticGzip("" + __dirname + "/dist", { clientMaxAge: 3600 * 1000 // 1 hour, it seems gzippo takes milliseconds, not seconds }));
你完成了:)
对于其他信息,你可以签出gzippo文档的其他选项
希望有所帮助,干杯!