Syntax Error.

[Sy] 【技術メモ】ChromeでApplication Cacheの状態を確認／デバッグする方法

2014/02/24

Application Cache に対応したWebアプリを開発する際に便利だった Chrome の機能をメモ。

※Chrome 33（2014/2/24時点の最新版）にて確認。

1. Application Cacheの一覧をチェックする

まずは一覧でチェックする方法。アドレスバーに次のように入力。

chrome://appcache-internals/

すると、Chrome上のApplication Cacheの一覧が表示されます。

ここではキャッシュごとに、以下のリンクでの操作ができます。

  • View Entries
    キャッシュされている静的ファイルのリストが表示できる。
  • Remove
    そのキャッシュを削除できる。

2. そのページのApplication Cacheの状況をチェックする

Application Cacheに対応しているページにて、Developers Tools を開いて[Resources] -> [Application Cache]でそのページのApplication Cacheの状況を確認できます。ここで確認できる情報は以下。

  • 現在のネットワーク接続状況（オンラインかオフラインか）
  • window.applicationCache.statusの値（IDLEとかOBSOLETEとか）
  • そのページでキャッシュされている静的ファイルのリスト

特に操作ができるわけじゃないですが、Application Cacheに対応しているサイトの開発時には参考になるかと。

3. リアルタイムでApplication Cacheの動きを確認する

Developer Toolsのコンソールには、Application Cache対応ページを表示している時にリアルタイムでログが出力されるので、Application Cacheの動作を理解するのにすごく助かりました。

すべてではないですが、例えば以下のようなログが出力されます。

マニフェストファイルのロード

マニフェストファイルをサーバに取りに行きます。これは毎回発生。

Document was loaded from Application Cache with manifest http://www.example.com/filename.appcache

Checkingイベント

マニフェストファイルに更新がないかチェック。

Application Cache Checking event

Downloadingイベント

マニフェストファイルが更新されていれば、Checkingイベントの直後にこのイベントが呼ばれます。

Application Cache Downloading event

Progressイベント

ファイルの更新。※キャッシュ対象のファイルが7つある場合。

Application Cache Progress event (0 of 7) http://www.example.com/index.js
Application Cache Progress event (1 of 7) http://www.example.com/index.css
　・
　・
（省略）
　・
　・
Application Cache Progress event (7 of 7)

NoUpdateイベント

マニフェストファイルが更新されていれば、Checkingイベントの直後にこのイベントが呼ばれます。

Application Cache NoUpdate event

Obsoleteイベント

マニフェストファイルが見つからなかった場合（他にもあるのか？）に呼ばれます。

Application Cache Obsolete event

このイベントが発生したら、キャッシュされていたファイルが破棄されるので次回リロード時にはキャッシュがない状態で改めてページを表示しようとします。

Good ! Bad ...
Syntax Error.