先日このブログで紹介した、iPhone向け英単語学習サイト『eWords』。
※eWordsの紹介記事はこちら
eWordsでは無通信状態でも利用できるよう、Mobile Safariのキャッシュ機能を使用している。
Mobile Safariでキャッシュ機能を使用するための手順は以下の2つだ。
マニフェストファイルの名前は便宜上「ewords.manifest」とする。
マニフェストに記載する事項は以下の4つだ。
「#」で始まる行はコメントとして扱われる。
次に対象のHTMLにマニフェストファイルを読み込ませる記述を追加する。
HTMLの開始タグに以下のような属性を付与すればOKだ。
マニフェストファイルを使うにはいくつか注意点が必要だ。
マニフェストファイルが更新されたことをMobile Safariに通知するために
ファイル中のコメントを修正する必要がある。
セクションではなく「#」で始まるコメントだ。
そのため、マニフェストファイルには「# Version: 201102200900」のようにバージョン番号としてタイムスタンプを記述するのが通例となっているようだ。
動作を検証するためには2回リロードする必要がある。
マニフェストを指定したHTMLはロードされるとマニフェストに記述されたリソースのチェックを始める。
そしてリソースに変更があれば、ダウンロードを開始する。
このダウンロードがすべて完了した時点でもう一度リロードすることで、初めて変更後のJSファイルやCSSファイルが適用されるという訳だ。
このダウンロードの様子は、このデバッギング用のJavascriptを仕込むことで確認できる。
必ずマニフェストファイルを修正しなければならない。
マニフェストファイルが指定されたHTMLはマニフェストファイルに未記載のファイルをロードしない。
逆にHTMLに記載されていない外部リソースでもマニフェストファイルに記載されていればロードしてしまう。
つまり、HTMLを修正した場合、合わせてマニフェストファイルも修正し、最新の状態に保つ必要がある。
当然この時マニフェストファイルのバージョン番号の更新も必要だ。
以上のように、大変不思議な仕様になっている。
仕様策定者を小一時間問い詰めたい次第だ。
なお、eWordsではNETWORKセクション、CALLBACKセクションは使用していない。
これらのセクションを使用すると、また不思議な仕様が発見できるかもしれない。
新たな不思議仕様が見つかったら是非、コメント欄などで教えていただきたい。
enjoy！
=======================================================================
書評ブログ『諸葛亮孔明の知恵袋』もやってます。
興味がありましたらお立ち寄りください。
=======================================================================
※eWordsの紹介記事はこちら
eWordsでは無通信状態でも利用できるよう、Mobile Safariのキャッシュ機能を使用している。
Mobile Safariでキャッシュ機能を使用するための手順は以下の2つだ。
- .manifest ファイル（マニフェストファイル）の作成
- 対象のHTMLに上記ファイルを読み込ませる記述を追加
マニフェストファイルの名前は便宜上「ewords.manifest」とする。
マニフェストに記載する事項は以下の4つだ。
「#」で始まる行はコメントとして扱われる。
- 冒頭に「CACHE MANIFEST」の文字列
- キャッシュするリソースを列挙する「CACHE」セクション
- 通信するリソースを列挙する「NETWORK」セクション
- オフライン時の代替手段を定義する「FALLBACK」セクション
例） ewords.manifest
CACHE MANIFEST
# Version: 201102200900
# キャッシュするリソースを明示的に列挙する
CACHE:
/
/images/hoge.png
/css/huga.css
/js/piyo.js
# 「オンラインホワイトリスト」と呼ばれるセクション
# ここに記述したリソースはキャッシュの対象にならず、必ずネットワークアクセスされる
NETWORK:
/api/get
# 「FALLBACK:」で始まるセクションは代替エントリを定義する
# この例では、「/」にアクセスしようとして失敗したら、
# 代わりに「/offline.html」を表示する
FALLBACK:
/ /offline.html
次に対象のHTMLにマニフェストファイルを読み込ませる記述を追加する。
HTMLの開始タグに以下のような属性を付与すればOKだ。
<html manifest="ewords.manifest">このHTMLファイルも便宜上「ewords.html」とする。
マニフェストファイルを使うにはいくつか注意点が必要だ。
1. まずは、マニフェストファイルを更新した場合。
マニフェストファイルが更新されたことをMobile Safariに通知するために
ファイル中のコメントを修正する必要がある。
セクションではなく「#」で始まるコメントだ。
そのため、マニフェストファイルには「# Version: 201102200900」のようにバージョン番号としてタイムスタンプを記述するのが通例となっているようだ。
2. 次に外部のJSファイルやCSSファイルを修正した場合。
動作を検証するためには2回リロードする必要がある。
マニフェストを指定したHTMLはロードされるとマニフェストに記述されたリソースのチェックを始める。
そしてリソースに変更があれば、ダウンロードを開始する。
このダウンロードがすべて完了した時点でもう一度リロードすることで、初めて変更後のJSファイルやCSSファイルが適用されるという訳だ。
このダウンロードの様子は、このデバッギング用のJavascriptを仕込むことで確認できる。
3. 最後にHTMLファイルにimgタグやscriptタグを追加した場合。
必ずマニフェストファイルを修正しなければならない。
マニフェストファイルが指定されたHTMLはマニフェストファイルに未記載のファイルをロードしない。
逆にHTMLに記載されていない外部リソースでもマニフェストファイルに記載されていればロードしてしまう。
つまり、HTMLを修正した場合、合わせてマニフェストファイルも修正し、最新の状態に保つ必要がある。
当然この時マニフェストファイルのバージョン番号の更新も必要だ。
以上のように、大変不思議な仕様になっている。
仕様策定者を小一時間問い詰めたい次第だ。
なお、eWordsではNETWORKセクション、CALLBACKセクションは使用していない。
これらのセクションを使用すると、また不思議な仕様が発見できるかもしれない。
新たな不思議仕様が見つかったら是非、コメント欄などで教えていただきたい。
enjoy！
=======================================================================
書評ブログ『諸葛亮孔明の知恵袋』もやってます。
興味がありましたらお立ち寄りください。
=======================================================================