決済ページから「戻る」と処理中のまま固まるボタンを、pageshow で直すと決めた理由。監査したら 3 ファイルに残っていました

// bfcache-check.js — 決済ボタンが「戻る」で固まらないかを実ブラウザで確かめる
// 使い方: node bfcache-check.js   （playwright が入っていること）
const http = require('http');
const { chromium } = require('playwright');
 
// 検証用のページ。React の代わりに、loading 変数と文言だけで同じ構造を再現する
const page_html = (guard, payUrl) => `<!doctype html><meta charset="utf-8"><title>plans</title>
<button id="join">Join</button><p id="state">idle</p><p id="evt">none</p>
<script>
  let loading = false;
  const $ = (id) => document.getElementById(id);
  $('join').onclick = async () => {
    loading = true; $('state').textContent = 'loading';
    await new Promise((r) => setTimeout(r, 50));      // /api/checkout の待ち時間の代わり
    location.href = '${payUrl}';                        // Stripe へ遷移
  };
  addEventListener('pageshow', (e) => {
    $('evt').textContent = 'persisted=' + e.persisted;
    ${guard ? "if (e.persisted) { loading = false; $('state').textContent = 'idle'; }" : ''}
  });
</script>`;
 
const serve = (port, handler) =>
  new Promise((ok) => { const s = http.createServer(handler).listen(port, () => ok(s)); });
 
const CASES = [
  { name: 'A 対策なし',                guard: false, noStore: false },
  { name: 'B pageshow で解除',         guard: true,  noStore: false },
  { name: 'C 対策なし + no-store',     guard: false, noStore: true  },
];
 
(async () => {
  let failed = 0;
  for (const c of CASES) {
    const pay  = await serve(4102, (_, r) => { r.writeHead(200, { 'content-type': 'text/html' }); r.end('<title>pay</title>pay'); });
    const html = page_html(c.guard, 'http://localhost:4102/pay');
    const site = await serve(4101, (_, r) => {
      const h = { 'content-type': 'text/html' };
      if (c.noStore) h['cache-control'] = 'no-store';
      r.writeHead(200, h); r.end(html);
    });
    // Playwright は既定で bfcache を切っているので、その引数を外して起動する
    const browser = await chromium.launch({ channel: 'chromium', ignoreDefaultArgs: ['--disable-back-forward-cache'] });
    const page = await browser.newPage();
    await page.goto('http://localhost:4101/');
    await page.click('#join');
    await page.waitForURL(/\/pay/);
    // page.goBack() は bfcache 復元時に load を待って固まるため、history.back() を使う
    await page.evaluate(() => history.back());
    await page.waitForTimeout(1200);
    const state = await page.textContent('#state');
    const evt = await page.textContent('#evt');
    const ok = state === 'idle';
    if (!ok) failed++;
    console.log(`${ok ? 'PASS' : 'FAIL'}  ${c.name.padEnd(22)} state=${state.padEnd(8)} ${evt}  (Chromium ${browser.version()})`);
    await browser.close(); site.close(); pay.close();
  }
  process.exit(failed ? 1 : 0);
})();

FAIL  A 対策なし                 state=loading  persisted=true  (Chromium 153.0.8010.12)
PASS  B pageshow で解除         state=idle     persisted=true  (Chromium 153.0.8010.12)
PASS  C 対策なし + no-store     state=idle     persisted=false  (Chromium 153.0.8010.12)