服务端部署前端页面，浏览器客户端缓存问题分析

问题背景

服务端：Nginx 部署 Angular 项目打包的前端页面，Nginx 使用默认配置
客户端：Chrome
问题现象：项目已更新Nginx的前端页面文件，客户端访问服务端页面时，仍然访问不到更新的文件（如 js 文件）

问题处理

Nginx添加配置后重启Nginx。

location / {
            root   html;
            index  index.html index.htm;
            if ($request_filename ~* .*\.(htm|html)$) 
            {                               
                add_header Cache-Control "no-store, no-cache, max-age=0, must-revalidate";
            }
           }

Chrome 需要清空缓存，重新加载服务端前端页面，仅添加 Nginx 配置，无法解决 Chrome 获取 disk cache 问题

问题分析

Chrome 打开 F12，网络 Tab，文件从 disk cache 中获取，Nginx 的 access.log 没有请求日志。

客户使用 Chrome 访问页面，一般通过收藏夹链接跳转，地址栏回车跳转，行为等同于以下 js 代码中其中一个，这两种情况，Nginx 均收到不到请求日志，浏览器是从 disk cache 中获取返回文件。

// 在新标签页打开
window.open('url');
// 在当前标签页打开
window.location.replace('url');

如果客户点击页面刷新按钮（即F5），Nginx 能够收到请求日志，并能够返回最新的前端文件，行为等同于以下 js 。

window.location.reload();

实际使用场景，客户会通过收藏夹访问，添加 Nginx 配置，匹配到 html 文件，即添加请求头。

Cache-Control "no-store, no-cache, max-age=0, must-revalidate"

Chrome 清空缓存后，再次加载页面，不会缓存 index.html 到 disk cache，后续再更新前端文件，index.html 文件更新，能够拉取到最新的 js , css 等文件。

# Angular 项目打包命令
ng bulid --prod

参考：
Cache-Control - HTTP | MDN
Module ngx_http_core_module_location
Module ngx_http_rewrite_module_if