アプリケーションキャッシュについて
HTML5から追加された
アプリケーションキャッシュを使えば
ネットにつながっていなくてもWebアプリを動かすことができる
アプリケーションキャッシュでは
HTML
CSS
画像などのリソースをブラウザーでキャッシュして
サーバーへ読みに行かないようにする
これにより
サーバーへの負荷が減り
レスポンス向上、通信量削減もできる
ただし、デメリットがある
設定ができていないと
コンテンツのアップデートができなくなるので注意
アプリケーションキャッシュを使うには
appcacheファイルを作成する
このファイルの拡張子は
.appcache
になる
HTML5ファイル
が
一番最初の行へ
<DOCTYPE HTML>
としたり
シェルスクリプトファイルで
一番最初の行へ
#!/bin/bash
とするように
アプリケーションキャッシュでは
CACHE MANIFEST
と書く
そして、2行目に
#Version: 1.0
というように、バージョンをコメントアウトで書く
アプリケーションキャッシュファイルのコメントアウトは
Linuxの設定ファイルのように
#を付けることでできる
有効範囲は行末まで
そして、3行目からはキャッシュしたいファイルを記述していく
ファイルのパスは
キャッシュファイルからの相対パスでも
http:// の絶対パスでも構わない
#でコメントアウトができるので
ファイル概要があるとわかりやすくなる
ソースにすると
CACHE MANIFEST #Version: 1.0 index.html menu.html #Javascript js/jquery-1.7.1.min.js js/jquery-mobile-1.1.0.min.js #CSS css/jquery-mobile-1.1.0.min.css
これで、アプリケーションキャッシュファイルができたので
後はHTMLファイルの
html要素へ
manifest=”” でアプリケーションキャッシュファイルを指定する
今回作成したのが
hello.appcacheなら
<! DOCTYPE html> <html manifest="hello.appcache"> </html>
となる
これで、Webアプリの設定はできたので
次に、サーバー側の設定
サーバーソフトとしてApacheを使っている場合
デフォルトだと
.appcacheファイルは
text/plain形式になるので
正しく動作させるため
text/cache-manifestファイルになるように設定する
これは、 .htaccessファイルを作成して
キャッシュファイルと同じディレクトリに置く
.htaccessの内容は
addType text/cache-manifest .appcache
アプリケーションキャッシュを使うと
iOSやAndroidでは
まず、appcacheファイルを取得し
キャッシュの設定のあるファイルを
キャッシュから読み込んで表示する
appcacheファイルをWebサーバーから取得できない場合
キャッシュされたappcacheの情報に基づき
コンテンツをキャッシュから表示する