HTML5を解釈してくれる最近のブラウザでは、キャッシュマニフェストという機構を利用してオフラインWEBアプリケーションなどが存在しています。この機能を利用して、通常のWEBコンテンツでも画像、CSS、JavaScriptなど、ブラウザ側でキャッシュさせて、本来オンラインで取得すべきデータのみにアクセスさせ、高速にコンテンツを表示させましょう。
マニフェストファイルを認識させる設定
キャッシュさせる内容を記述したファイルをマニフェストファイルと呼びます。このマニフェストファイルをサーバから提供し、クライアントのブラウザで正常に解釈ができるように設定を追加する必要があります。ApacheをはじめとしたHTTPサーバの設定ファイルに下記の様に設定するか、.htaccessなどのファイルに追加してください。
AddType text/cache-manifest .manifestマニフェストファイルを作成
マニフェストファイルの拡張子を .manifest として適当な名前でマニフェストファイルを作成、設置してください。
hiroki.manifest
CACHE MANIFEST
#version 1.0 11-6-2011
CACHE:
#images
http://hiroki.jp:5080/img/logo.png
#style sheets
![]()
![]()
hiroki.jp
#javascript files
![]()
![]()
hiroki.jp
NETWORK:
*
CACHE:
キャッシュさせるファイルを記載します。
NETWORK:
必ずネットワークから取得する内容を記述します。CACHEセクションに記載したデータ以外をネットワークから取得するようにするのでアスタリスクを記載します。
マニフェストファイルの自動生成
上記でマニフェストファイルを作成しましたが、下記のmanifestRというサイトを利用して、現在閲覧しているURLのマニフェストファイルのひな形を自動生成してくれるサイトがあります。こういったサイトを利用してマニフェストファイルの作成をさくっとやってしまうのがオススメです。
作成されたマニフェストファイルの内容を確認してから利用してください。自動生成された物をそのまま利用すると何もかもキャッシュされてしまって、意図しない動作を招くと思います。
HTMLにマニフェストファイルを設定
すべてのHTMLのDOCTYPEの次の行（通常は2行目）に下記のようにマニフェストファイルを設定してください。
<html manifest="/hiroki.manifest">動作確認
Chromeの開発ツールなどでは下記の様に2回目以降のアクセスは from cache とされて、ネットワークへのアクセスはしていないことが確認できます。
キャッシュの更新
キャッシュマニフェストを更新してあげれば､以下のイベントが呼ばれるので、キャッシュを更新される。
<script type="text/javascript">
applicationCache.addEventListener('updateready', function() {
applicationCache.swapCache();
}, false);
</script>
