如何强制更新客户端CSS缓存？Node.js+Express+Cloudflare场景问题咨询

根因说明 #

无痕模式可正常加载更新后的样式，说明Cloudflare配置、服务端返回的资源均无问题，问题出在普通模式下用户浏览器本地的旧缓存规则残留。

具体解决步骤 #

• 调整Express静态资源响应头配置，给CSS类资源设置合理的缓存时长，避免过长的强制缓存导致资源无法更新，参考配置：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public'), {
  setHeaders: (res, filePath) => {
    if (filePath.endsWith('.css')) {
      // 设置10分钟强缓存，到期后自动触发协商缓存校验资源是否更新
      res.setHeader('Cache-Control', 'public, max-age=600, must-revalidate');
    }
  }
}));

• 排查是否启用了Service Worker做静态资源缓存，如有需要更新Service Worker的缓存版本号，可临时添加以下代码注销已有的Service Worker验证问题：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(regs => {
    regs.forEach(reg => reg.unregister());
  });
}

• 替换版本号添加方式：将query参数形式的版本号改为直接嵌入文件名，比如style.v3.css，这种方式比?v=3的兼容性更好，所有浏览器都会将不同文件名的资源判定为独立资源，不会命中旧缓存。
• 可在HTML的head标签内添加全局缓存控制meta标签，强制页面不缓存旧资源：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

内容的提问来源于stack exchange，提问作者jamep37912