SPA重新构建部署如何刷新缓存

问题

单页面应用在重新部署更新时，此时正在浏览网页，并且已经在网页内的用户，始终会使用老的js与css文件，一直在使用已经缓存了的静态资源。

分析

在HTTP协议中，响应头有 expires 或 Cache-Control:max-age=XXX，前端才缓存。
但在浏览器中，默认会对html,js,css,字体,音视频等静态文件、以及重定向进行缓存，如果在HEAD标签中指定：

<HEAD>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

浏览器不会缓存html，但是还是会对重定向缓存并且这种方式并不规范，可能有的浏览器不支持。

解决方案

对hash过的静态文件还是采用默认方式，客户端会缓存。
对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据 ETAG 返回200或者304

# 前端html文件
    location / {
        add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';

        root /var/www/example/dist/;
        index index.html index.htm;
        try_files $uri /index.html;
    }

参考资料

ETAG - MDN

Cache-Control - RFC2616