HTML 5におけるアプリケーションキャッシュの更新プロセス

杉山貴章(オングス)
2009-01-09 08:00:00
  • このエントリーをはてなブックマークに追加

キャッシュ更新時のイベントを監視する

 アプリケーションキャッシュに関するイベントを受け取るには、window.applicationCacheオブジェクトに対してリスナを登録しておけばよい。例えばキャッシュ完了時に発生するcahcedイベントに対してはリスト1のようにする。

リスト1cachedイベントに対するリスナの追加

window.applicationCache.addEventListener("cached", function () {
        // イベント処理
    }, false);

 リソースの取得や更新は以下の手順で行われ、その都度ApplicationCacheオブジェクトに対して関連するイベントが送られる。

  1. まず、manifest属性を含んだページにアクセスするとchecking イベントが送られる。
  2. ブラウザはサーバからキャッシュマニフェストを取得し、現在キャッシュされているマニフェストがある場合にはそれと比較して、変更されていない場合にはnoupdateイベントが送られる。この場合キャッシュの更新は行われない。
  3. キャッシュマニフェストが変更されている場合にはdownloadingイベントが送られ、マニフェストに記載された全てのリソースとapplicationCache.add()でキャッシュに追加されたリソースの取得が開始される。
  4. 取得したリソースは一時キャッシュに保存され、各リソースの保存が完了する度にprogressイベントが送られる。
  5. サーバーからHTTPの404または410コードが返された場合にはobsoleteイベントが送られる。また、何らかのエラーが発生した場合にはerrorイベントが送られる。このときもキャッシュの更新は中止される。
  6. 全てのリソースの取得が完了したらcachedイベントが送られる。

 ここでは、以前紹介したサンプルのindex.htmlにリスト2のようなJavaScriptを埋め込み、ページのロード時にinit()関数が実行されるようにしてみた。それぞれのイベントの発生時にダイアログを表示するだけの単純な例である。

リスト2 各イベントを監視する例

    

 全てのキャッシュを削除した上でindex.htmlにアクセスすると、[Checking!]→[Downloading!]→[Progress!]→[Progress!]→[Progress!]→[Cached!]の順番でダイアログが表示される(ただし、Firefox 3.1における実装はまだ初期段階なので挙動がおかしい場合もある)。Progressが3回あるのはマニフェストに3つのリソースが記載されているからだ。ページをリロードすると、マニフェストが変更されていないため今度は[Checking!]→[Noupdate!]となる。

 アプリケーションキャッシュを効果的に利用することで、ネットワークの接続性に依存しないウェブアプリケーションを作成することが可能となる。正式な仕様の確定とFirefoxによる実装が待ち遠しい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]