動的ページでApplicationCacheを利用する

Application Cache

クライアント端末に、HTML、JS、画像、音などのリソースを
保存することができ、大量のリソースを必要とするブラウザゲームや
Webアプリでリクエスト数を減らすことができます。
また、完全にオフライン化も可能です。

懸念点

Application Cacheの仕様上、以下の制約を受けます。

(1) ApplicationCacheを有効にしたページのHTMLは必ずキャッシュされてしまう。
(2) 部分的にキャッシュを更新できない。(更新する際は総入れ替え)
(3) GET通信のみで有効
(4) キャッシュ完了となる前に、ページ遷移してしまうと1から再取得する
(5) バッググラウンドで動作するため、キャッシュ完了後、次回のアクセスからキャッシュを利用できる
(6) 大量リソース下の環境で利用するとキャッシュ完了までに数分かかってしまう(10MBで5分~7分程度)

上記の仕様を見てわかるように、
基本的に静的コンテンツ向けの機能となっています。

特に(1)の仕様で、動的コンテンツが作りづらくなっていますが
以下のようにHTMLを構成することでPOST通信の動的コンテンツでも利用することができます。

動的コンテンツで利用する

iframe内でApplicationCacheさせるページを読み込むことで、
(1)と(3)の問題を解決します。

<input type="hidden" name="user-id" value="<サーバ側で動的生成>" />
<iframe src="<動的ページ>" />

POSTを受け取ったサーバは、上記の様にHTMLをレンダリングして
クライアントに返却することで、iframe内はApplicationCacheされ
iframeの親windowは動的にページを変えることができます。

後は、親windowで動的に変化するinput要素から値を取得し
その値をKeyに、iframe側はAjaxで動的に値を取得することで
動的なコンテンツを表示させることができます。

備考

ApplicationCacheの他にも、localStorageでデータを保存する方法もあります。
localStorageに格納出来るデータは文字列のみとなりますが、
画像などをバイナリ化してBase64でエンコードすることで格納できます。
また、JSONデータ(Object)も、JSON.stringify()することで文字列として格納できます。

ApplicationCacheはサーバ側のトラフィックを減らせたり
オフラインで表示できるページを作れたりと便利な機能ではありますが
大量リソース下で使用するとキャッシュの読み込みに時間がかかったり、
動作が不安定になるので、使用する際は良く検討することをお勧め致します。

使用用途の1つとして、iOS/SafariのWebClipではキャッシュクリアできないため、
no-cacheとするか、ApplicationCacheを利用してキャッシュを更新させる必要があります。

 

コメントを残す

メールアドレスが公開されることはありません。