Reactで、ブラウザに保存できる容量と使用量を表示する方法

import { useCallback, useEffect, useState } from 'react';

export type StorageInfo =
  | { status: 'loading' }
  | { status: 'unsupported' }
  | { status: 'error'; message: string }
  | { status: 'ready'; usage: number; quota: number };

export function useStorageEstimate() {
  const [info, setInfo] = useState<StorageInfo>({ status: 'loading' });

  const refresh = useCallback(async () => {
    // http のページ（localhost 以外）では navigator.storage がない
    if (!navigator.storage?.estimate) {
      setInfo({ status: 'unsupported' });
      return;
    }
    try {
      const { usage = 0, quota = 0 } = await navigator.storage.estimate();
      setInfo({ status: 'ready', usage, quota });
    } catch (e) {
      setInfo({ status: 'error', message: String(e) });
    }
  }, []);

  useEffect(() => {
    refresh();
  }, [refresh]);

  return { info, refresh };
}

const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];

// 1KB = 1024B として、小数1桁までで表す
export function formatBytes(bytes: number): string {
  let value = bytes;
  let i = 0;
  while (value >= 1024 && i < UNITS.length - 1) {
    value /= 1024;
    i++;
  }
  const digits = i === 0 ? 0 : 1;
  return `${value.toLocaleString('ja-JP', { maximumFractionDigits: digits })} ${UNITS[i]}`;
}

import { formatBytes } from './formatBytes';
import type { StorageInfo } from './useStorageEstimate';

type Props = { info: StorageInfo; onRefresh: () => void };

export function StorageMeter({ info, onRefresh }: Props) {
  if (info.status === 'loading') return <p>容量を調べています…</p>;
  if (info.status === 'unsupported') return <p>このブラウザでは容量を調べられません。</p>;
  if (info.status === 'error') return <p>容量を取得できませんでした（{info.message}）</p>;

  const { usage, quota } = info;
  const percent = quota > 0 ? (usage / quota) * 100 : 0;

  return (
    <div className="meter">
      <p>
        使用中 <span className="num" data-testid="usage">{formatBytes(usage)}</span>
        {' '}／ 上限 <span data-testid="quota">{formatBytes(quota)}</span>
      </p>
      <progress max={quota} value={usage} aria-label="保存容量の使用率" />
      <p>
        <span data-testid="percent">{percent.toFixed(2)}%</span> を使用（残り{' '}
        <span data-testid="remain">{formatBytes(quota - usage)}</span>）
      </p>
      <button type="button" onClick={onRefresh}>再計算</button>
    </div>
  );
}

function App() {
  const { info, refresh } = useStorageEstimate();

  const save = async () => {
    await saveToIndexedDB();
    await refresh();
  };
  const remove = async () => {
    await deleteIndexedDB();
    await refresh();
  };

  return (
    <>
      <StorageMeter info={info} onRefresh={refresh} />
      <div className="actions">
        <button type="button" id="save" onClick={save}>10MB を保存</button>
        <button type="button" id="saveOnly" onClick={() => saveToIndexedDB()}>10MB を保存（再計算しない）</button>
        <button type="button" id="remove" onClick={remove}>保存したデータを消す</button>
      </div>
    </>
  );
}

もう10MB 保存後 画面 {"usage":"20 MB","quota":"10 GB","percent":"0.19%","remain":"10 GB",...}
再計算しないボタンで保存後 画面 {"usage":"20 MB","quota":"10 GB","percent":"0.19%","remain":"10 GB",...}
そのときの estimate {"usage":31461058,"quota":10768879298,"quota - usage":10737418240,"usageDetails":{"indexedDB":31461058}}
再計算ボタンを押した後 画面 {"usage":"30 MB","quota":"10 GB","percent":"0.29%","remain":"10 GB",...}

データを消した後 estimate {"usage":2813,"quota":10737421053,"quota - usage":10737418240,"usageDetails":{"indexedDB":2813}}
3秒後の estimate {"usage":2813,"quota":10737421053,"quota - usage":10737418240,"usageDetails":{"indexedDB":2813}}

開いた直後 estimate {"usage":0,"quota":10737418240,"quota - usage":10737418240,"usageDetails":{}}
10MB 保存後 estimate {"usage":10487856,"quota":10747906096,"quota - usage":10737418240,"usageDetails":{"indexedDB":10487856}}

ディスクに残さないコンテキスト estimate {"usage":0,"quota":3221225472,"quota - usage":3221225472,"usageDetails":{}}

http://demo.example:8080 isSecureContext false
http://demo.example:8080 navigator.storage undefined
http://demo.example:8080 画面 {"usage":null,"quota":null,"percent":null,"remain":null,"text":"このブラウザでは容量を調べられません。"}

sandbox の iframe の中 TypeError: Failed to execute 'estimate' on 'StorageManager': The operation is not supported in this context.