immutable を付けた資産を同じ URL で差し替えたら、利用者のブラウザだけが古いままでした

// server.mjs（抜粋）— 方式ごとのヘッダーとアクセス数の記録
import http from 'node:http';
import crypto from 'node:crypto';
 
let version = 1;                                   // /__bump で 2 に上げる
const hits = {};                                   // path -> サーバーに届いた回数
const body = () => `window.APP_VERSION = ${version};\n`;
const etag = () => '"' + crypto.createHash('sha1').update(body()).digest('hex').slice(0, 12) + '"';
const CC = {
  '/immutable/app.js':  'public, max-age=31536000, immutable', // A, D
  '/maxage/app.js':     'public, max-age=31536000',            // B
  '/revalidate/app.js': 'no-cache',                            // C
};
 
http.createServer((req, res) => {
  const u = new URL(req.url, 'http://x'); const p = u.pathname;
  if (p === '/__bump')  { version = 2; res.end('ok'); return; }
  if (p === '/__reset') { for (const k in hits) delete hits[k]; version = 1; res.end('ok'); return; }
  if (p === '/__hits')  { res.setHeader('content-type', 'application/json'); res.end(JSON.stringify(hits)); return; }
 
  const m = p.match(/^\/hashed\/app\.([0-9a-f]{8})\.js$/);        // E: URL の中身は固定
  if (m) {
    hits[p] = (hits[p] || 0) + 1;
    res.setHeader('cache-control', 'public, max-age=31536000, immutable');
    res.setHeader('content-type', 'text/javascript');
    res.end(`window.APP_VERSION = ${m[1] === 'aaaaaaaa' ? 1 : 2};\n`); return;
  }
  if (CC[p]) {
    hits[p] = (hits[p] || 0) + 1;
    res.setHeader('cache-control', CC[p]); res.setHeader('etag', etag());
    if (req.headers['if-none-match'] === etag()) { res.statusCode = 304; res.end(); return; }
    res.setHeader('content-type', 'text/javascript'); res.end(body()); return;
  }
  if (p === '/page.html') {                         // HTML は常に都度確認。参照先 src だけ変えて返す
    res.setHeader('cache-control', 'no-cache'); res.setHeader('content-type', 'text/html');
    res.end(`<!doctype html><script src="${u.searchParams.get('src')}"></script><body>x</body>`); return;
  }
  res.statusCode = 404; res.end('nf');
}).listen(8765);

# run.py（抜粋）— 初回→差し替え→再訪→リロード→fetch の cache オプションを順に確認する
import json, urllib.request
from playwright.sync_api import sync_playwright
 
B = 'http://127.0.0.1:8765'
def g(p): return urllib.request.urlopen(B + p).read().decode()
def hits(): return json.loads(g('/__hits'))
 
# (ラベル, 初回 src, 差し替え後 src, fetch の検証対象)
cases = [
  ('A 同じURL + immutable',  '/immutable/app.js',       '/immutable/app.js',       '/immutable/app.js'),
  ('B 同じURL + max-age',    '/maxage/app.js',          '/maxage/app.js',          '/maxage/app.js'),
  ('C 同じURL + no-cache',   '/revalidate/app.js',      '/revalidate/app.js',      '/revalidate/app.js'),
  ('D クエリ ?v=2',          '/immutable/app.js',       '/immutable/app.js?v=2',   '/immutable/app.js'),
  ('E 内容ハッシュ名',       '/hashed/app.aaaaaaaa.js', '/hashed/app.bbbbbbbb.js', '/hashed/app.aaaaaaaa.js'),
]
with sync_playwright() as pw:
    br = pw.chromium.launch(); print('chromium', br.version)
    for label, s1, s2, probe_path in cases:
        g('/__reset')                                   # 毎回 v1 に戻し、アクセス数を空にする
        ctx = br.new_context(); page = ctx.new_page()   # 毎回空のキャッシュで始める
        page.goto(f'{B}/page.html?src={s1}');  v_first = page.evaluate('window.APP_VERSION')
        g('/__bump')                                    # 中身を v2 に差し替える
        page.goto(f'{B}/page.html?src={s2}');  v_revisit = page.evaluate('window.APP_VERSION')
        v_reload = '-'
        if s1 == s2:
            page.reload(); v_reload = page.evaluate('window.APP_VERSION')
        probe = lambda mode: page.evaluate(
            "async ([u,m]) => (await (await fetch(u,{cache:m})).text()).trim()", [probe_path, mode])
        print(label, v_first, v_revisit, v_reload, probe('default'), probe('reload'), sum(hits().values()))
        ctx.close()
    br.close()

// hash-assets.mjs — dist/assets 配下に内容ハッシュを付け、HTML の参照を書き換える
// 使い方: node hash-assets.mjs dist
import { readdirSync, readFileSync, renameSync, writeFileSync, statSync } from 'node:fs';
import { createHash } from 'node:crypto';
import { join, extname, basename } from 'node:path';
 
const root = process.argv[2] ?? 'dist';
const assetsDir = join(root, 'assets');
const HASHED = /\.[0-9a-f]{8}\.[a-z0-9]+$/;       // すでにハッシュ済みなら二重に付けない
const map = new Map();                             // 旧パス → 新パス
 
for (const name of readdirSync(assetsDir)) {
  const full = join(assetsDir, name);
  if (!statSync(full).isFile() || HASHED.test(name)) continue;
  const hash = createHash('sha256').update(readFileSync(full)).digest('hex').slice(0, 8);
  const ext = extname(name);
  const next = `${basename(name, ext)}.${hash}${ext}`;
  renameSync(full, join(assetsDir, next));
  map.set(`/assets/${name}`, `/assets/${next}`);
}
 
// HTML だけを書き換える（JS の import や CSS の url() は下の落とし穴を参照）
for (const name of readdirSync(root).filter((n) => n.endsWith('.html'))) {
  const p = join(root, name);
  let html = readFileSync(p, 'utf8');
  for (const [from, to] of map) html = html.split(from).join(to);
  writeFileSync(p, html);
}
console.log([...map].map(([a, b]) => `${a} -> ${b}`).join('\n'));

$ node hash-assets.mjs dist
/assets/app.js -> /assets/app.8e8ee1fe.js
/assets/site.css -> /assets/site.d9ff348e.css
$ cat dist/index.html
<link rel="stylesheet" href="/assets/site.d9ff348e.css"><script src="/assets/app.8e8ee1fe.js"></script>

# _headers — assets 配下だけ 1 年。HTML は触らず、都度確認のまま
/assets/*
  Cache-Control: public, max-age=31536000, immutable

dist/assets 配下のファイル名に内容ハッシュ(8桁)を付け、dist 直下の HTML の参照を書き換える
Node スクリプトを書いてください。
条件: 二度流しても二重にハッシュを付けない／HTML 以外は書き換えない／最後に旧パス→新パスの一覧を出す。
動作確認は一時ディレクトリで行い、実行したコマンドと出力をそのまま貼ってください。