本文へ移動

§25-04Meta

接続状態 indicator

オンライン・オフラインの状態を色と文言で示す。

通信が切れたことを即座に伝え、保存されない操作を続けさせない。チャットや共同編集など、常時接続を前提とする画面に置く。

実装のポイント

navigator.onLine は信頼度が低いので online/offline イベントと実際のリクエスト失敗を併用し、状態変化は role=status で通知する。

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

このパターンが効く目的