nginx 缓存 index.html 强制重新加载

Question

在服务器迁移期间，新的 nginx 配置缺少缓存控制指令。因此，我们最终得到了一个缓存 index.html，这对我们的 SPA 非常不利，如果我们部署新代码，它就不会再刷新了。我们需要 index.html 不被缓存。

这是我们几天前在线的（错误的）nginx 配置：

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

我们修复了配置：

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

问题

过去几天访问过我们网页的客户缓存了一个旧 index.html。我们如何强制他们的浏览器删除缓存 index.html？

Answer 1

当客户端不向服务器请求新内容时，无法在用户端（浏览器）手动重置浏览器缓存。在这种情况下，访问任何脚本都是有用的，您的 SPA 是在没有缓存的情况下下载的。在这种情况下，您可以更改此脚本并运行强制重新加载页面（但要小心 - 您需要任何标志以防止在每次加载页面后永久强制重新加载）。例如，如果您现场有 GTM - 这会有所帮助。

更新：我不是 js 专家，但你需要在所有页面上添加 GTM 标签，就像这样的 js-script:

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g, '\') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }

nginx 缓存 index.html 强制重新加载

nginx cached index.html force reload

caching

nginx

browser-cache