HTML5でiPhone用Webアプリをオフライン対応に：iPhoneで動かす業務用Webアプリ開発入門（5）（1/2 ページ）
業務用アプリのiPhone対応経験を基に、iPhoneで動かすための、業務で使えるWebアプリケーションを作成するときのコツを紹介します
モバイルWebアプリはオフライン対応が必須！
いよいよ最終回の今回は、「Application Cache（アプリケーションキャッシュ）」を使います。
HTML5で導入されたアプリケーションキャッシュを使うと、WebアプリをWebブラウザのキャッシュに載せてオフラインで利用できるようになります。特に、前回の「HTML5のlocalStorageでiPhone用Webアプリを高速化」で紹介したHTML5の「localStorage」と組み合わせると、一度ダウンロードしたデータについては完全にオフラインでアプリが動作するようになります。
オフラインでの利用に対応して、3G回線など接続が安定しない環境でも業務用Webアプリが快適に使えるようにしてみましょう。
「キャッシュマニフェスト」ファイルを作るには
アプリケーションキャッシュを使うには、Webブラウザにキャッシュしてほしいファイルを知らせる「キャッシュマニフェスト」ファイルを作るところから始めます。
Webアプリで使っている、JavaScriptのソースコードファイルや画像ファイル、CSSファイルなどのパスを書いておけば、一度ロードされるとアプリケーションキャッシュに格納されて、次回以降はリクエストされなくなります。
キャッシュマニフェストファイルの中身を見てみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
キャッシュマニフェストファイルの1行目は、常に「CACHE MANIFEST」です。
「#」はコメント
「#」から始まる行はコメントです。キャッシュの更新はマニフェストファイルが変更されたことで検出されます。キャッシュの更新をWebブラウザに通知するためにバージョン番号や日付を入れておきます。
iPhoneのSafariは更新のチェックのリクエスト自体が来ない
ここで注意ですが、一般にキャッシュマニフェストファイルの説明では、「1byteでも変更があると、キャッシュが更新される」とありますが、iPhoneのSafariの場合、更新のチェックのリクエスト自体が来ないので、いくらコメント部分を変更しても、それだけではキャッシュは更新されません。
後述しますが、JavaScriptで明示的にキャッシュを更新する必要があります。
「CACHE:」はキャッシュしたいURL
「CACHE:」の行以降にキャッシュしたいURLを列挙します。ワイルドカードは使えないので、キャッシュしたいJavaScript、画像、CSSを1行に1つずつ記述します。
「NETWORK:」はキャッシュしたくないURL
「NETWORK:」の行の後にはキャッシュしたくないURLを列挙します。Ajaxで取得するXMLやJSONを返すURLは、こちらに記述します。
HTMLでキャッシュマニフェストを有効にするには
HTMLでアプリケーションキャッシュを有効にするには、以下のように<html>タグの中で「manifest」属性を使って、このキャッシュマニフェストファイルを指定します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Webサーバをキャッシュマニフェストに対応するには
キャッシュマニフェストファイルは、「text/cache-manifest」というMIMEタイプで送信する必要があります。
Apacheの場合
Webサーバとして「Apache httpd」を使っている場合、デフォルトではキャッシュマニフェストに対応していないので、「httpd.conf」ファイルに以下の行を追加して「 .manifest」という拡張子のファイルのときに、このMIMEタイプで送信するように設定します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
「httpd.conf」ファイルについては、以下の記事を参考にして下さい。
Tomcatの場合
「Tomcat」などのJava用のアプリケーションコンテナの場合は、アプリごとの「web.xml」の<welcome-file-list>要素の直前に、以下の<mime-mapping>要素を追加します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
「web.xml」ファイルについては、以下の記事を参考にして下さい。
これで、アプリケーションキャッシュに指定したコンテンツがキャッシュされるようになります。次ページでは、キャッシュマニフェストにHTML自体を含める方法やキャッシュを更新する方法について解説します。
Copyright © ITmedia, Inc. All Rights Reserved.