オフラインでも見られるようにする

Webサーバーにアクセスした時に必要なファイルをローカルに保存しておけば、ネットに接続していない時でも接続しているのと同じようにサービスを受けることができるようになります。
このHTML5の仕組みを「アプリケーションキャッシュ」と言います。

キャッシュするファイルを指定するためにhtml要素に「manifest=”ファイル名.manifest”」属性を付けます。
そして、Webサーバー側の設定ファイルである、.htaccessファイルに以下の１行を追加します。

---

AddType text/cache-manifest              manifest

---

これで、manifest拡張子のファイルはMIME/TYPE「text/cache-manifest」でクライアントに送信されるようになります。マニフェストファイルは「text/cache-manifest」で送信しないとクライアント側で認識されません。

manifestファイルの中身は以下の様にします。

CACHE MANIFEST #  #はコメントです。 # 下のCACHEから、キャッシュするファイル名を指定します。 # 何もラベルが無い場合は、このCACHEを指定したのと同じになります。 CACHE index.html # 下のNETWORKからはキャッシュしないファイル名を指定します。 NETWORK ・・・・.cgi http://maps.google.com/ # ここに*（アスタリスク）を置くと、全てのファイルという # 意味になります。この場合、全てのファイルをキャッシュ # しない設定になります。 # 下のFALLBACKから、キャッシュしていないリソースにアクセスした # 時に表示する代替リソースを指定します。 FALLBACK # abc.htmlがキャッシュされていない場合、error.htmlを表示します。 abc.html  error.html

上のようにマニフェストを設定すると、例えば「index.html」ファイルはクライアントのローカルにキャッシュされるようになります。

例えばここで、サーバー側でindex.htmlファイルが更新された場合、index.htmlファイルはキャッシュ指定されているのでクライアント側には旧いindex.htmlファイルが表示され続けることになります。

このような場合は、サーバー側でindex.htmlファイルの更新と同時にマニフェストファイルの更新も行えば、キャッシュ内のファイルも更新されるようになります。
マニフェストファイルの日付が更新されていると、キャッシュされたファイルも新しい物に更新されます。

また、javascriptから明示的にキャッシュを更新したい場合、「window.applicationCache.update()」を呼べば、マニフェストファイルを再ダウンロードしてキャッシュも更新してくれるようになります。


ＦｉｒｅｆｏｘでＵＲＬ入力欄に「about:cache」と指定すれば、キャッシュ情報が表示されます。
ＣｈｒｏｍｅでＵＲＬ入力欄に「chrome://appcache-internals/」と指定すれば、キャッシュ情報が表示されます。