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

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

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の情報に基づき
コンテンツをキャッシュから表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です