アプリケーションキャッシュについて

アプリケーションキャッシュについて

HTML5から追加された
アプリケーションキャッシュを使えば
ネットにつながっていなくてもWebアプリを動かすことができる

アプリケーションキャッシュでは
HTML
CSS
画像などのリソースをブラウザーでキャッシュして
サーバーへ読みに行かないようにする

これにより
サーバーへの負荷が減り
レスポンス向上、通信量削減もできる

ただし、デメリットがある
設定ができていないと
コンテンツのアップデートができなくなるので注意

アプリケーションキャッシュを使うには
appcacheファイルを作成する

このファイルの拡張子は
.appcache
になる

HTML5ファイル
が
一番最初の行へ

としたり

シェルスクリプトファイルで
一番最初の行へ

とするように

アプリケーションキャッシュでは

と書く

そして、2行目に

というように、バージョンをコメントアウトで書く

アプリケーションキャッシュファイルのコメントアウトは
Linuxの設定ファイルのように
#を付けることでできる
有効範囲は行末まで

そして、3行目からはキャッシュしたいファイルを記述していく

ファイルのパスは
キャッシュファイルからの相対パスでも
http:// の絶対パスでも構わない

#でコメントアウトができるので
ファイル概要があるとわかりやすくなる

ソースにすると

これで、アプリケーションキャッシュファイルができたので
後はHTMLファイルの
html要素へ
manifest=”” でアプリケーションキャッシュファイルを指定する

今回作成したのが
hello.appcacheなら

となる

これで、Webアプリの設定はできたので
次に、サーバー側の設定

サーバーソフトとしてApacheを使っている場合
デフォルトだと
.appcacheファイルは
text/plain形式になるので

正しく動作させるため
text/cache-manifestファイルになるように設定する

これは、 .htaccessファイルを作成して
キャッシュファイルと同じディレクトリに置く

.htaccessの内容は

アプリケーションキャッシュを使うと
iOSやAndroidでは
まず、appcacheファイルを取得し
キャッシュの設定のあるファイルを
キャッシュから読み込んで表示する

appcacheファイルをWebサーバーから取得できない場合
キャッシュされたappcacheの情報に基づき
コンテンツをキャッシュから表示する