Firefox 3.1でアプリケーションキャッシングを試す

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

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

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

リスト1 index.html


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

  
    

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

次のページへ

リスト2 page2.html


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

  
    

2ページ目

image.jpg 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を表示したとき、リソースの保存を許可するかどうかが確認される 図1 最初にindex.htmlを表示したとき、リソースの保存を許可するかどうかが確認される

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

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

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

図3 ファイルメニューでオフライン状態に 図3 ファイルメニューでオフライン状態に
図4 オフライン状態でも問題なく2ページ目が表示できる 図4 オフライン状態でも問題なく2ページ目が表示できる

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

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