6.3 Cache・Service Worker

Cache Storage and Service Workers

Cache StorageとService Workerは、PWA（Progressive Web App）の中核技術。オフライン対応、高速な読み込み、バックグラウンド処理を実現する。DevToolsはこれらの開発・デバッグに必要なツールを提供している。

Cache Storage

Cache Storageは、HTTPリクエスト/レスポンスのペアを保存するためのストレージ。Service Workerと組み合わせて、オフラインでもリソースを提供できる。

Cache Storageの確認

操作手順

  1. Application パネルを開く
  2. 左サイドバーの「Cache Storage」セクションを展開
  3. キャッシュ名をクリックして内容を表示

表示される情報

列 説明
Name キャッシュされたリソースのURL
Response Type basic、cors、opaque等
Content-Type MIMEタイプ
Content-Length サイズ
Time Cached キャッシュされた日時

キャッシュの操作

  • プレビュー: エントリをクリックしてHeaders/Previewを確認
  • 削除: エントリを右クリック → Delete
  • キャッシュ全体の削除: キャッシュ名を右クリック → Delete
  • 更新: 右上のリフレッシュボタン

Response Typeの種類

タイプ 説明
basic 同一オリジンからのレスポンス
cors CORSを使用したクロスオリジンレスポンス
opaque no-corsモードでのクロスオリジンレスポンス（内容は不透明）
opaqueredirect リダイレクトレスポンス
opaqueレスポンスの注意 opaqueレスポンスはステータスコードやヘッダーにアクセスできない。キャッシュサイズも実際より大きく報告されることがある（パディングが追加されるため）。

Service Worker

Service Workerは、ブラウザとネットワークの間で動作するプロキシスクリプト。リクエストのインターセプト、キャッシュ制御、プッシュ通知、バックグラウンド同期などを実現する。

Service Workerの確認

操作手順

  1. Application パネルを開く
  2. 左サイドバーの「Service Workers」をクリック

表示される情報

項目 説明
Source Service Workerのスクリプトファイル
Status activated、waiting、installing等
Clients 制御下にあるページ
Received 最終更新日時

Service Workerのライフサイクル

状態 説明
Installing インストール中（installイベント発火）
Waiting インストール完了、アクティブ化待ち
Activating アクティブ化中（activateイベント発火）
Activated アクティブ、リクエストを制御可能
Redundant 不要になった（新しいバージョンに置換、またはインストール失敗）

Service Workerの操作

Update

Service Workerの更新をチェック。スクリプトが変更されていれば新しいバージョンがインストールされる。

Unregister

Service Workerの登録を解除。デバッグ中に完全にリセットしたい場合に使用。

skipWaiting

待機中のService Workerを即座にアクティブ化。開発中に新しいバージョンをすぐにテストしたい場合に便利。

Start / Stop

Service Workerを手動で起動/停止。アイドル状態のテストに使用。

Inspect

Service Worker用の別のDevToolsウィンドウを開く。専用のConsole、Sources、Networkパネルでデバッグ可能。

開発用オプション

Service Workersセクションの上部にあるチェックボックス。

オプション 説明
Offline オフライン状態をシミュレート
Update on reload リロード時に常にService Workerを更新
Bypass for network Service Workerをバイパスして直接ネットワークにアクセス
開発時の推奨設定 開発中は「Update on reload」を有効にすると、Service Workerの変更がすぐに反映される。本番環境のテスト時はオフにして、実際のユーザー体験を確認する。

Background Services

Service Workerが処理するバックグラウンドイベントを記録・確認できる。

確認できるイベント

サービス 説明
Background Fetch バックグラウンドでのファイルダウンロード
Background Sync オフライン時のデータ同期予約
Notifications プッシュ通知
Payment Handler Payment Request APIのハンドラ
Periodic Background Sync 定期的なバックグラウンド同期
Push Messaging プッシュメッセージの受信

イベントの記録

操作手順

  1. 左サイドバーでサービスを選択（例: Background Sync）
  2. 「Record」ボタンをクリック
  3. イベントが発生すると記録される
  4. 3日間保持される

Manifest（Webアプリマニフェスト）

PWAの設定ファイル（manifest.json）の内容を確認できる。

確認できる項目

  • アプリ名（name、short_name）
  • アイコン
  • テーマカラー、背景色
  • 表示モード（standalone、fullscreen等）
  • 開始URL
  • スコープ

インストール可能性

「Installability」セクションで、PWAとしてインストール可能かどうかと、不足している要件を確認できる。

インストール要件 PWAをインストール可能にするには、有効なmanifest.json、Service Worker、HTTPS（localhost除く）が必要。

Storage（ストレージクリア）

Applicationパネルの「Storage」セクションで、サイトのストレージを一括管理できる。

ストレージ使用量

各ストレージタイプの使用量が円グラフで表示される。

Clear site data

選択したストレージを一括クリア。以下から選択可能：

  • Unregister service workers
  • Local and session storage
  • IndexedDB
  • Cookies
  • Cache storage
完全リセット Service Workerのキャッシュ問題が発生した場合、すべてのチェックボックスを選択して「Clear site data」をクリックすると、完全にリセットできる。

デバッグのTips

Service Workerが更新されない

  1. 「Update on reload」を有効にする
  2. または、skipWaitingをクリック
  3. または、Unregister → ページリロード

キャッシュが古い

  1. Cache Storageで該当キャッシュを削除
  2. または、「Clear site data」で全削除
  3. Service Workerのキャッシュバージョンを更新

オフライン動作の確認

  1. 「Offline」チェックボックスを有効化
  2. ページをリロード
  3. Service Workerがキャッシュからリソースを提供するか確認

fetchイベントのデバッグ

  1. Service Workerの「Inspect」をクリック
  2. Sourcesパネルでfetchイベントハンドラにブレークポイント設定
  3. ページからリクエストを発生させる

Console出力の確認

Service WorkerのConsole出力はメインページのConsoleには表示されない。「Inspect」で開いた専用のDevToolsで確認する。

参考文献
[1] Debug service workers - Chrome DevTools. developer.chrome.com
[2] Service Worker API - MDN. developer.mozilla.org
[3] The Cache API - web.dev. web.dev