如何在指定日期对站点HTML页面执行单次强制刷新并恢复缓存

核心逻辑 #

通过客户端本地存储标记已触发的刷新批次，仅当服务端配置的强制刷新时间晚于客户端已记录的刷新时间时，才触发一次强制拉取，触发完成后立刻回归正常缓存逻辑，不会出现后续每次访问都重复刷新的问题。

具体实现 #

• 保留你现有的CSS/JS版本化缓存方案，不需要调整原有静态资源的缓存配置。
• 在所有HTML页面的<head>标签最开头插入一段极小的内联脚本，内联脚本会随HTML文档返回，不会被单独缓存，执行优先级最高。
  脚本代码如下：

<script>
(function() {
  // 替换为你需要触发强制刷新的目标日期对应的毫秒级时间戳
  const TARGET_REFRESH_TIME = 1727740800000; // 示例为2024-10-01 00:00:00的时间戳
  const STORAGE_MARK = 'last_html_force_refresh';
  const lastRefreshTime = Number(localStorage.getItem(STORAGE_MARK) || 0);

  if (lastRefreshTime < TARGET_REFRESH_TIME) {
    localStorage.setItem(STORAGE_MARK, TARGET_REFRESH_TIME);
    // 传入true强制绕过本地缓存拉取最新内容
    location.reload(true);
  }
})();
</script>

配套HTML缓存配置 #

• 不需要给HTML配置永久不缓存的规则，按你的业务需求正常配置即可：如果需要短周期协商缓存可以设置Cache-Control: public, max-age=300, must-revalidate配合ETag；如果需要更长缓存周期也可以按需调整。
• 触发刷新时，脚本会强制拉取一次最新的HTML文档，拿到最新HTML后本地存储的刷新标记会更新为本次的目标时间，后续访问时判断条件不成立，不会再触发重载，HTML和静态资源都会正常走缓存逻辑。
• 后续如果需要再次在新的日期节点触发强制刷新，只需要修改脚本里的TARGET_REFRESH_TIME为新的时间戳部署即可，到点会自动触发一次新的刷新，之后再次回归正常缓存。

方案优势 #

• 触发逻辑完全可控，只会在指定时间点对未完成本次刷新的用户触发一次强制拉取
• 没有额外的性能损耗，脚本体积不到1KB，执行速度极快
• 不会出现指定日期后每次访问都强制刷新的问题，完全匹配需求

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