アプリケーションキャッシュを使う時の注意点in work

 
date:2012.01.04   posted by:asai
 

あけましておめでとうございます。
2012年も新たな気持ちで頑張りますので、よろしくお願いいたします。

あ、もしよろしければデザイニウム年賀プレゼント企画をやっていますので、気軽にどうぞ☆
(クイズに正解した方にプレゼントする日本酒などを用意しております)

さて、去年の暮れにiPadを対象としたオフライン動作が可能なWEBアプリを作成したので、
少し遅くなりましたが、その際のTipsやアプリケーションキャッシュを用いたiOS用WEBアプリのポイントなどをまとめて公開したいと思います。

※この記事を読んでいる人に説明は必要ないと思いますが、アプリケーションキャッシュとは必要なファイルをローカルに保存するHTML5で追加された仕組みのことです。

0.アプリケーションキャッシュ無しでの開発
1.manifestファイルを用意
2.manifestファイルチェック用のスクリプトを用意
3.開発Tips集

0.アプリケーションキャッシュ無しでの開発

アプリケーションキャッシュを用いた開発は普通のWEB開発に比べて非常に手間がかかります。
今まではファイルをアップロードしてブラウザでテスト…としていたものも、manifestファイルと呼ばれるキャッシュするファイルの一覧を用意してバージョンが上がるたびに、そのファイルを更新したり…。
間違ってキャッシュしてしまったファイルを消すのにも、また手間がかかります。

なので、開発の効率を上げるためにもまずはアプリケーションキャッシュを用いずに開発を開始しましょう。

1.manifestファイルを用意

前述したmanifestファイルについては、以下の記事にわかりやすくまとめられています。
http://dev.classmethod.jp/smartphone/off-line-application-use-application-cache/

なお、文字コードと改行コードは、文字コードUTF-8N、改行コードCRLFで問題なく動作しました。

2.manifestファイルチェック用のスクリプトを用意

これを用意せずにmanifestファイルを定義してしまうと悲惨です。
iOS系端末では設定画面からキャッシュは消せますが、定義されたmanifestファイル自体を消す機能はありません。

どういうことかというと、チェック機能を実装前にそのページにアクセスするとmanifestファイルを一生更新できなくなるということです。

まぁ、iTunes経由で「復元」して出荷状態に戻せば消せるんですけど、そうすると強制的にOSは最新バージョンにされてしまうのでテスト機のバージョンを上げたくない時などは困りますよね。そもそも、めんどくさすぎますし(笑)

チェック用のスクリプトは全体の流れも説明してくれていることもあり、
http://news.mynavi.jp/special/2009/html5-2/002.html
を参考にするのがオススメです。

3.開発Tips集

とまぁ、ただ単にアプリケーションキャッシュを利用するだけなら、そこまで複雑な作業は必要としません。
ですが、開発を進める上でいくつか発生した問題・課題などがありますので、それをTipsという形で共有させていただこうと思います。

●iOS系デバイスでローカルストレージを増やした際のエラー
iOS系デバイスではキャッシュに必要な容量が多くなると、ストレージを増やすかどうかを聞かれます。
増やすを押そうが、キャンセルを押そうが、どちらにしろそのダイアログが出た時点で次のファイルのキャッシュ作業はエラーとなり、そこでキャッシングは終了します。何だソレっていう感じですが仕様なので仕方ありません。

なので、、エラー発生時にキャッシュをやり直す作業が必要となりますので、
appCache.addEventListener(‘error’, handleCacheError, false);
というようなイベントリスナーを用意し、エラーが発生した時点でキャッシュ作業をやり直す指定が必要です。

●PCとiPad(iPhone)で一番違うのはエラーが発生した後の処理。
iPad1はエラーが発生した時点で処理が止まる(以降のファイルはキャッシュされない)ので特に注意が必要です。
manifestファイルに記述したパスに404が含まれるとそれがエラーの原因となるため、大量のファイルを管理するコストを考えると出来る限りCSS SPRITESなどのテクニックを利用してファイル数を少なくするのがオススメです。

ちなみにPCはエラーはエラーとして、その後の処理が止まることはありません。少なくとも404では止まりませんでした。
※PC版safariは定義していなくても勝手にファビコンをキャッシュしようとします。で、ファビコンが無かったらエラーを返してくるという。。。まさに大きなお世話。

●2重にかかったBASIC認証では不明なエラーが発生する
これは自分のミスから発生したエラーなのですが、
sample.com/AAA/
sample.com/BBB/
の二つにそれぞれ.htaccessでBASIC認証がかかっていてAAAのファイルからBBBのファイルを参照している場合、当然ながらBASIC認証が二重に発生します。

認証が2重の場合、一回目の認証は問題ないのですが二回目の認証はダイアログが出た時点でエラーとなり、処理が止まってしまうようです。
さらに、このエラーの場合、iPad1ではキャッシュをクリアしても消えないファイルが発生しました(詳細な発生条件は不明)。
そのファイルにBBBのファイルを参照しているHTMLが含まれていた場合、強制的に2重認証が発生します(2重認証が発生=キャッシュ作業は必ずエラー)。

とりあえず、一度AAA,BBB共に認証を外し、キャッシュを消せる範囲で消してからリロード・キャッシュを再度行ったら直りました。
再現性が低いけれど、エラーの原因がわからなかったら、一度BASIC認証を外してみるというのは対処方法の一つとして試してみる価値はあるかもしれないです。

まとめ
iPhoneやiPadなどの携帯端末・タブレットに搭載されているブラウザは全てHTML5に対応しているため、しばらくの間は、まだブラウザごとの実装状況に大きな差のあるPCよりもスマートフォンなどの方がHTML5の恩恵を受けるのではないかと思います。
ただ、端末自体の処理性能はまだまだ発達途中なので、大容量のファイルのキャッシュには向かないという印象です。

実装方針としては、都度HTMLを更新するのは大変なので、フレームだけHTMLで用意しデータ自体はajaxを利用して通信が行える時に更新するような設計にしておくとmanifestファイルの更新などを考えなくて良いので運用は楽になるんじゃないかと思います。

ということで、HTML5のアプリケーションキャッシュについて、でした。
本年もよろしくお願いします!

career goals essay
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none