最近同事反馈我们有一个页面在发版过后看不到更新的内容, 刷新一下浏览器后就能看到更新的内容了. 看起来是一个小问题, 其实很影响用户体验. 在这里记录一下排查过程.
原状态
先看下网站的Response Headers的Cache-Control是private. 说明浏览器会存储缓存.
然后我们在网站首页新增一个按钮, alert一个hello world. 来看看重新发布后的效果.
发布后
注意发布后重看网站有几种操作, 带来的效果会不一样.
操作1: 从收藏夹点过来(或者从链接点过来的), 新加的按钮没有出现. 因为这种操作的Request Headers上不会带有Cache-Control属性. 返回的状态码直接是200 OK(from disk cache).
操作2: 在一个新tab上输入网址, 按enter键. 这个操作跟操作1是一样的, 浏览器不会给请求头加上Cache-Control属性. 直接读的本地缓存.
操作3: 在原来的网站上刷新(或Ctrl+R), 或者在地址栏按enter键. 新加的按钮出现了. 这种操作浏览器会给请求头加上Cache-Control: Max-age=0. 即不用本地缓存.
改Nginx配置
修改nginx的返回头中的Cache-Control为no-cache.即每次验证缓存.
同时把新加的按钮改成一个新的名字, 重新发布, 同时reload nginx
跟上一步一样来验证效果:
⚠️发现操作1跟操作2还是返回的200 OK(from disk cache). ⚠️
看到虽然nginx修改了配置, 但是请求还是直接读的本地缓存. 需要进行操作3后才会返回新的内容.
再经过了操作3之后, 后续再重发布就正常了.
也就是说虽然改了返回头, 但是对之前已经有缓存的用户还是没有办法及时更新, 还是需要通过刷新来清空缓存. 有点小遗憾, 不知道大家有没有其它好的办法.
