本文へ移動

§15-12Perceived Performance

Offline indicator

ネット接続が切れたことをバナーで知らせる。

操作が反映されない原因が通信にあると気づかせる。移動中の利用や不安定な回線で、エラーの原因を誤解させない。

実装のポイント

navigator.onLine と online/offline イベントで状態を購読し、復帰時に短く知らせて消す。バナーは role=status で読み上げ、オフライン中の操作の扱いを明記する。

特徴
  • ブラウザ API
デモで使っているもの
  • shadcn/ui
  • lucide-react