🔊 Play

ブラウザには、Cookie や LocalStorage、SessionStorage、IndexedDB など、複数の保存領域（ストレージ）が存在します。
また、PWA（Progressive Web App）に不可欠な Service Worker やキャッシュ戦略も、Applicationパネルから確認できます。

この章では、**「保存されたデータを確認・編集する力」と「キャッシュの仕組みを理解する力」**を身につけましょう。

---

9.1 Cookie、LocalStorage、SessionStorageの確認と編集

Cookie：

• サーバーとの通信時に自動で送信される、小さなデータ（上限4KB）
• Applicationパネル →「Storage」→「Cookies」→ ドメイン選択で確認可能
• Name, Value, Domain, Path, Expires, HttpOnly, Secure などの属性を確認

LocalStorage / SessionStorage：

• JavaScriptからアクセス可能なキー・バリュー形式のストレージ
  • LocalStorage：永続的
  • SessionStorage：タブを閉じると消える
• 「Storage」セクション → 対象ドメイン → Local/SessionStorage を選択
• データの編集・削除もGUIから可能

💡ユースケース：

• 認証トークンが LocalStorage に正しく保存されているか確認
• クッキーが HttpOnly 設定されており、JavaScript からアクセスできないことを確認
• 「なぜかログイン状態が保持されている」→ Cookie の有効期限を確認して納得

---

9.2 IndexedDBの調査

IndexedDBとは？

• クライアントサイドで大量の構造化データを保持できる非同期ストレージ
• LocalStorage より高機能（オブジェクト保存、インデックス、検索など）

DevToolsでの確認：

• Applicationパネル →「IndexedDB」→ データベース名 → オブジェクトストアを展開
• 各データは表形式で確認可能、削除も容易
• データ更新・登録は基本的に JavaScript 経由で行う

💡ユースケース：

• PWAで保存されたキャッシュデータの中身を確認
• オフライン機能で保存されたユーザーの入力データの調査
• 開発中の「履歴」や「お気に入り」機能が期待通り動作しているかを検証

---

9.3 キャッシュ戦略（Service Worker、Manifest）

Service Worker：

• ネットワークプロキシのように振る舞い、リクエストを傍受・キャッシュ可能
• Applicationパネル →「Service Workers」で確認
  • 登録状態（active / waiting / redundant）
  • 通信の interception 状況（Fetchイベントの有無）
  • 「更新」「キャッシュのクリア」なども可能

キャッシュストレージ（Cache Storage）：

• Service Worker によって制御される「オフラインでも使えるリソースキャッシュ」
• Applicationパネル →「Cache Storage」で一覧確認、内容の表示・削除も可能

Web App Manifest：

• ホーム画面に追加されたときの名前やアイコン、起動URLなどを定義
• Applicationパネル →「Manifest」から確認でき、内容の構文チェックも可能

💡ユースケース：

• オフライン対応PWAで、キャッシュされたJS/CSS/画像が正しく読み込まれているかを確認
• Service Worker が最新に更新されず古いバージョンが残っている → 手動で「更新」ボタン
• キャッシュが意図せず残っていてリリースした内容が反映されない → 「キャッシュ削除」操作で改善

---

🧑‍💻 実践課題

課題：PWAアプリでログイン後に「オフラインでもプロフィールページが表示される」理由を調べる

1. Application パネルを開いて Service Workers が有効か確認
2. Cache Storage を開いて、profile.html や画像などのリソースが含まれているかを確認
3. ネットワークを「Offline」に切り替えたうえでページ表示 → キャッシュが使われていることを実証
4. Manifestファイルにアプリのメタ情報が正しく設定されているか確認

---

📝 まとめ

• Applicationパネルでは、ブラウザに保存された全ストレージの中身が見える化される
• Cookie / LocalStorage / IndexedDB / キャッシュ の違いと使い分けを理解
• Service WorkerとCache Storageを使いこなせば、オフライン対応や高速なUXも実現可能

この知識を活用することで、ユーザーの状態を保持する仕組みやPWAの挙動の裏側を、可視化しながら確実に把握できるようになります。