项目中遇到的浏览器缓存问题记录

问题描述：

本次迭代功能中，对登录后的第一个页面有调整，地址为/training-teacher/course/list
上线后，发现登录进来访问到依旧是原来的页面样式。
诡异的是，强制刷新页面后访问到新的页面，但是退出再次登录后，看到的还是老页面

原页面

老页面

期望新页面

新页面

目标

• 用户无需手动刷新页面即可看到新功能
• 查找出再次登录看到还是老页面的原因

分析

浏览器缓存问题
通常浏览器缓存规则分为两种，强制缓存和协商缓存。关于浏览器缓存的讲解可以看这里
需要在web服务器上对html页面进行缓存设置，强制浏览器走协商缓存。
nginx 配置问题
项目中原来已配置过html页面缓存策略, 但在当前页面没有生效。

    location / {
        if ($request_filename ~ .*\.(htm|html)$)
        {
            add_header Cache-Control no-cache;
        }
        if ($request_filename ~ .*\.(css|js|png|jpg|jpeg|svg)$)
        {
            add_header Cache-Control max-age=2592000;
        }
        try_files $uri $uri/ /index.html;
    }

因为项目采用多页和单页配合使用(mpa)，所以在nginx配置上不能只在location /设置缓存策略。

url 单页跳转问题
已经强制刷新，获取到最新页面，但重新登录后看到的还是老页面。
这是因为，登录跳转的url路径为 /training-teacher 后面的路径不全是通过单页默认路由实现的。
在强制刷新时，页面路径为/training-teacher/course/list, 所以缓存中的/training-teacher没有被更新，导致以上问题。

解决方案

在nginx配置中对其它目录也设置同样的缓存策略

    location ^~ /training-teacher {
        if ($request_filename ~ .*\.(htm|html)$)
        {
            add_header Cache-Control no-cache;
        }
        if ($request_filename ~ .*\.(css|js|png|jpg|jpeg|svg)$)
        {
            add_header Cache-Control max-age=2592000;
        }
        try_files $uri $uri/ /training-teacher/index.html;
    }

问题解决。