Reactで、新しい版を公開したことを画面で知らせる方法

import { defineConfig, type Plugin } from 'vite';
import react from '@vitejs/plugin-react';

// ビルドごとに版の名前を決める（指定がなければビルドした時刻）
const version = process.env.APP_VERSION ?? new Date().toISOString();

// ビルドした出力に version.json を足す
function versionFile(): Plugin {
  return {
    name: 'version-file',
    apply: 'build',
    generateBundle() {
      this.emitFile({
        type: 'asset',
        fileName: 'version.json',
        source: JSON.stringify({ version }),
      });
    },
  };
}

export default defineConfig({
  plugins: [react(), versionFile()],
  define: {
    __APP_VERSION__: JSON.stringify(version), // 画面のコードに、同じ版の名前を埋め込む
  },
});

/// <reference types="vite/client" />
declare const __APP_VERSION__: string;

$ cat dist-v1/version.json; echo; cat dist-v2/version.json; echo
{"version":"2026.11.02-1"}
{"version":"2026.11.02-2"}

$ grep -o "2026\.11\.02-[0-9]" dist-v1/assets/*.js dist-v2/assets/*.js | sort | uniq -c
      2 dist-v1/assets/index--u13FVI0.js:2026.11.02-1
      2 dist-v2/assets/index-DGTQm3mj.js:2026.11.02-2

import { useEffect, useState } from 'react';

// この画面をビルドしたときの版
const CURRENT = __APP_VERSION__;

// サーバーに置いた version.json から、いま公開されている版を読む
async function fetchLatest(signal: AbortSignal): Promise<string | null> {
  try {
    const res = await fetch(`${import.meta.env.BASE_URL}version.json`, {
      cache: 'no-store', // ブラウザの HTTP キャッシュを使わず、毎回サーバーに取りに行く
      signal,
    });
    if (!res.ok) return null;
    const data: unknown = await res.json();
    if (typeof data === 'object' && data !== null && 'version' in data && typeof data.version === 'string') {
      return data.version;
    }
    return null;
  } catch {
    return null; // オフラインや、JSON でない応答のときは、何もしない
  }
}

export function useNewVersion(intervalMs = 5 * 60 * 1000) {
  const [latest, setLatest] = useState<string | null>(null);

  useEffect(() => {
    if (latest !== null) return; // 一度見つけたら、それ以上は問い合わせない
    let controller: AbortController | null = null;

    const check = async () => {
      if (document.visibilityState !== 'visible') return; // 見ていないタブでは問い合わせない
      controller?.abort();
      controller = new AbortController();
      const v = await fetchLatest(controller.signal);
      if (v !== null && v !== CURRENT) setLatest(v);
    };
    const onVisibilityChange = () => {
      if (document.visibilityState === 'visible') check(); // タブに戻ってきたら、すぐ確かめる
    };

    const id = setInterval(check, intervalMs);
    document.addEventListener('visibilitychange', onVisibilityChange);
    window.addEventListener('online', check);
    return () => {
      clearInterval(id);
      document.removeEventListener('visibilitychange', onVisibilityChange);
      window.removeEventListener('online', check);
      controller?.abort();
    };
  }, [intervalMs, latest]);

  return { current: CURRENT, latest, hasUpdate: latest !== null };
}

import { useState } from 'react';
import { useNewVersion } from './useNewVersion';

export function UpdateBanner() {
  const { hasUpdate } = useNewVersion();
  const [dismissed, setDismissed] = useState(false);
  const show = hasUpdate && !dismissed;

  // role="status" の入れ物は最初から置いておき、中身だけを出し入れする
  return (
    <div role="status" className={show ? 'update-banner' : undefined}>
      {show && (
        <>
          <p>新しい版が公開されました。読み込み直すと、最新の画面になります。</p>
          <button type="button" onClick={() => location.reload()}>
            読み込み直す
          </button>
          <button type="button" onClick={() => setDismissed(true)}>
            あとで
          </button>
        </>
      )}
    </div>
  );
}

$ node test/flow.mjs
開いた直後: この画面の版：2026.11.02-1 / 知らせ「」 / version.json の問い合わせ 0回
5分後（まだ公開していない）: この画面の版：2026.11.02-1 / 知らせ「」 / version.json の問い合わせ 1回
公開: dist-v2
公開して4分59秒後: この画面の版：2026.11.02-1 / 知らせ「」 / version.json の問い合わせ 1回
公開して5分後: この画面の版：2026.11.02-1 / 知らせ「新しい版が公開されました。読み込み直すと、最新の画面になります。読み込み直すあとで」 / version.json の問い合わせ 2回
さらに15分後: この画面の版：2026.11.02-1 / 知らせ「新しい版が公開されました。読み込み直すと、最新の画面になります。読み込み直すあとで」 / version.json の問い合わせ 2回
「あとで」を押したあと: この画面の版：2026.11.02-1 / 知らせ「」 / version.json の問い合わせ 2回
メモの中身: 書きかけ
読み込み直したあと（あとでを押した画面）: この画面の版：2026.11.02-2 / 知らせ「」 / version.json の問い合わせ 2回
メモの中身: ""
ページのエラー: 0

--- 「読み込み直す」を押す
押す前: この画面の版：2026.11.02-1 / ボタン 1個 / 問い合わせ 1回
押したあと: この画面の版：2026.11.02-2 / ボタン 0個 / 問い合わせ 1回
さらに10分後: この画面の版：2026.11.02-2 / ボタン 0個 / 問い合わせ 3回
ページのエラー: 0

--- タブが見えていないとき（再現）
隠して30分: この画面の版：2026.11.02-1 / ボタン 0個 / 問い合わせ 0回
見える状態に戻した直後（時計は進めていない）: この画面の版：2026.11.02-1 / ボタン 1個 / 問い合わせ 1回

--- version.json を max-age=600 で配信したとき
公開前 fetch（指定なし）: 2026.11.02-1 / サーバーが受けた問い合わせ 1回
公開後 fetch（指定なし）: 2026.11.02-1 / サーバーが受けた問い合わせ 1回
公開後 fetch（cache: 'no-store'）: 2026.11.02-2 / サーバーが受けた問い合わせ 2回
公開後 fetch（指定なし、もう一度）: 2026.11.02-1 / サーバーが受けた問い合わせ 2回
フックの5分後: この画面の版：2026.11.02-1 / ボタン 1個 / 問い合わせ 3回

--- version.json が 503 を返すとき
503 のあいだ10分: この画面の版：2026.11.02-1 / ボタン 0個 / 問い合わせ 2回 / ページのエラー 0
戻して5分後: この画面の版：2026.11.02-1 / ボタン 1個 / 問い合わせ 3回
--- オフラインのとき
オフラインで10分: この画面の版：2026.11.02-1 / ボタン 0個 / 問い合わせ 0回 / ページのエラー 0
オンラインに戻した直後（時計は進めていない）: この画面の版：2026.11.02-1 / ボタン 1個 / 問い合わせ 1回 / 戻してからの問い合わせ 1回

$ ./node_modules/.bin/vite --host 127.0.0.1 --port 5173 --strictPort > vite-dev.log 2>&1 & VP=$!; sleep 3; node test/dev.mjs; kill $VP
この画面の版：2026-11-02T08:11:12.914Z
version.json の応答: 200 text/html
5分後のボタン: 0 個 / ページのエラー 0