アプリケーションキャッシングの使用例

　ここでは、リスト1とリスト2の2つのページを用意した。2ページ目は画像を1つ含んでいる。両ページとも、html要素にはmanifest属性で"cache-manifest.manifest"というキャッシュマニフェストを指定している。

リスト1 index.html

  
  
    
    
  

  
    
アプリケーションキャッシュの使用例
    次のページへ
  

リスト2 page2.html

  
  
    
    
  

  
    
2ページ目
    
    index.htmlへ
  

　画像を含む3つのファイルをキャッシングしたいので、キャッシュマニフェストはリスト3のようにする。

リスト3 cache-manifest.manifest

CACHE MANIFEST
# v1
index.html
page2.html
image.jpg

　また、キャッシュマニフェストはtext/cache-manifestというMIMEタイプで送信されなくてはならないので、.htaccessなどにリスト4のような設定を加えておく。

リスト4 .htaccessに以下の設定を追加

AddType text/cache-manifest .manifest

　これをウェブサーバ上に配置してFirefoxからindex.htmlにアクセスしてみよう。Firefox 3.0では正常に動作しないので、Firefox 3.1のベータ版を利用する必要がある。デフォルトの設定では、最初にページが表示されると図1のようにキャッシングを許可するかどうか確認されるはずだ。ここで[許可]をクリックすれば、キャッシュマニフェストに指定されたリソースがキャッシュされる。

図1 最初にindex.htmlを表示したとき、リソースの保存を許可するかどうかが確認される

　オプション設定の[詳細]タブを見てみると、図2のようにlocalhostのデータを保存する準備ができていることがわかる。キャッシュの削除もここから行える。

図2 キャッシュを保持しているサイトはオプションメニューから見ることができる

　この状態で[ファイル]メニューから[オフライン作業]を選択してFirefoxをオフライン状態にしてみよう（図3）。これでサーバとの通信が切断されたので、通常であれば[次のページへ]のリンクをクリックしても次のページへは飛べないはずだ。しかし今回は、page2.htmlとimage.jpgのキャッシュが保存されているので、図4のようにあたかもネットワークに接続されているかのように次のページを表示することができる。URLも「http://〜」となっておりオンライン／オフラインの区別は付かない。

図3 ファイルメニューでオフライン状態に

図4 オフライン状態でも問題なく2ページ目が表示できる

　次回はキャッシングに関連したイベントについて紹介する。