.html页面缓存问题

一般项目发版后前端静态文件会有缓存问题，不强制刷新很难解决，但是用户不会去强制刷新。

一般浏览器缓存的文件有html、css、js等。而html中引入的css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。但是浏览器把整个html页面缓存就稍微麻烦些。

html静态文件缓存：

1、一般设置了静态文件的缓存，都会设置文件的协商缓存。所以每次请求下载文件时，都会返回一个http响应Last-Modified（文件修改时间1）。用户访问文件会在http请求头带上If-Modify-Since：文件修改时间1，当后台发现文件在修改时间1之后都没有修改，会返回304，告诉客户端从缓存里面获取文件；当系统更新后，文件修改时间变为修改时间2，此时用户访问文件会在http请求头带上If-Modify-Since：文件修改时间1，后台会返回200，并且返回最新的文件，所以设置了协议缓存后，返回的html都是最新的文件。
2、按照协商缓存原则，设置了协议缓存后，不会出现修改后文件获取不到问题，但是由于移动端的客户端比较繁杂，内核不同，封装的方法千奇百怪，所以也可能会出现设置协商缓存后，更新文件后，还是获取缓存的文件问题。这时候可以尝试用强缓存去解决这个问题，在nginx配置，访问html文件时，强制不缓存。

html页面头部或http协议设置禁止缓存：

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

服务器端禁止缓存，如nginx 配置如下：

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

location ~ .*.(htm|html)?$ {
   add_header Cache-Control "no-store, no-cache";
}

设置某个目录下的html文件强制不缓存：

 location /user {       
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-store, no-cache";
            add_header Pragma no-cache;
            add_header Expires 0;
        }
    }

注意：由于移动端机型问题，有的机型微信中打开一般会把整个html页面缓存下来，所以每次页面更新，可能访问的还是之前缓存的页面，这是只在html head中设置meta没有效果，需要在服务端设置no-catch、no-store。