アプリケーションキャッシュ (4/5)

キャッシュの利用は、実はこれだけでOKなのですが、この他にもスクリプト内からキャッシュを操作するための仕組みも用意されているので、それらについても触れておきましょう。

キャッシュに関するオブジェクトは、「applicationCache」というオブジェクトとして用意されています。この中には、以下のようなメソッドがあります。

update――マニフェストファイルを調べて更新をチェックし、更新されていたなら新しいファイルをダウンロードします。
swapCache――ダウンロードされたファイルにキャッシュを入れ替えます。

updateは、新しいファイルをダウンロードしますが、まだこの段階ではキャッシュは更新されません。この後で、swapCacheを呼び出して、初めてキャッシュが更新されます。この他に、キャッシュを扱うときに覚えておくと便利なものが1つあります。

navigator.onLine――オンライン状態を示すプロパティです。trueならばオンライン、falseならばオフラインになります。

これを使って、オンラインであればupdateでチェックをする、とすればよいでしょう。では、スクリプトを使ってキャッシュを更新するサンプルを考えてみましょう。

下に、簡単なスクリプトを用意しました。これは1時間ごとにキャッシュをチェックし更新するサンプルです。ローカルストレージに次のチェック時間を保管しておき、これを調べてupdate/swapCacheを実行するようにしてあります。実に簡単ですね。

ところが！　実際にやってみると、これは動かないのです。なぜなら、swapCacheのところで例外が発生するため、キャッシュは更新されないのです。

なぜ、そうなるのか？　それは、swapCacheを呼び出した時には、まだupdateが完了していないためです。updateによる新しいファイルのダウンロードは非同期で行われます。このため、updateの直後はまだダウンロードが完了していないのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※キャッシュを更新する（動かない例）

<script type="text/javascript">
var d1 = new Date().getTime();
var d2 = localStorage.getItem('last_cached') * 1;
if (d2 == null){ d2 = d1; }
if (d2 > d1){ return; }
d1 += 1000 * 60 * 60; // 更新の間隔
localStorage.setItem('last_cached',d1);
if (navigator.onLine) {
	applicationCache.update();
	applicationCache.swapCache();
	alert("swap");
}
</script>