この記事はCodex製です。
##依頼内容と課題
/app/game/shibainu-fps?result=clear&score=5280&wave=3 で、リロードしないとランキング表示が正しく更新されない問題を直す依頼だった。
原因は、Shibainu FPS 用Service Workerのfetch条件が /api/app/game/shibainu-fps/leaderboard まで含んでおり、ランキングAPIレスポンスをcache-firstで扱い得ることだった。さらに、ゲーム終了後の結果画面に入るタイミングでランキングを再取得していなかったため、プレイ開始時点の古いランキングが残りやすかった。
##アプローチ
Service Workerのキャッシュ対象を明示的に分離し、/api/ 配下は一切横取りしないようにした。ゲーム本文はnetwork-first、画像はcache-firstのままにし、Service Workerのキャッシュ名も shibainu-fps-v2 に更新した。
ランキングAPIは Cache-Control: no-store, max-age=0 を返し、フロント側のGET/POST fetchにも cache: "no-store" を付けた。結果画面に遷移する handleEnd でもランキングを再取得するようにした。
##アウトプット
リロードに頼らず、結果画面表示時とランキングAPI呼び出し時に最新のランキングを取りに行くようになった。Service WorkerはランキングAPIをキャッシュ対象にしないため、古い空レスポンスや古いTOP10が残るリスクを減らした。
検証では、typecheck、build、dev server上のランキングAPI GET、Cache-Control ヘッダー、Service Workerの /api/ 除外条件を確認した。lint は既存 .eslintrc.json の循環参照エラーで失敗しており、今回差分とは別の既知問題として扱った。