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

では、一体どういうタイミングでswapCacheを呼び出せばいいのか。もっとも確実なのは、ダウンロードが完了し、更新の準備が整ってからです。「そんなのわかるもんか」――いいえ、わかるんです。ちゃんとそのためのイベントが用意されていますから。

applicationCacheオブジェクトには、さまざまな状況に応じて発生するイベントが用意されています。ざっと整理すると以下のようになるでしょう。

onchecking――マニフェストファイルの内容をチェックしているとき
onnoupdate――更新が不要と判断されたとき
ondownloading――キャッシュするデータをダウンロードしているとき
onprogress――更新処理が進行中のとき
oncached――キャッシュするデータのダウンロードが完了したとき
onupdateready――キャッシュの更新準備が完了したとき
onobsolete――キャッシュが消去されたとき
onerror――何らかのエラーがおきたとき

このイベントを利用することで、swapCacheのタイミングを確実なものにできます。では、下のリスト欄に修正したスクリプトを掲載しておきましょう。ここでは、最初にonupdatereadyイベントに関数を設定しています。

applicationCache.addEventListener("updateready",function(){
    applicationCache.swapCache();
    alert("swap");
});

ここで、swapCacheを実行すれば、確実にキャッシュの更新が行えるようになるというわけです。この他にも、applicationCacheのイベント関係は、キャッシュの状況に応じて処理を実行させるのに役立ちます。実際にどういうときにどのイベントが発生するのか、それぞれで確かめてみると面白いでしょう。

(by. SYODA-Tuyano.)

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

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

※キャッシュを更新する（動く例）

<script type="text/javascript">
applicationCache.addEventListener("updateready",function(){
	applicationCache.swapCache();
	alert("swap");
});

function initial() {
	var d1 = new Date().getTime();
	var d2 = localStorage.getItem('last_cached') * 1;
	if (d2 == null){ d2 = d1; }
	if (d2 > d1){ return; }
	d1 += 1000 * 1; // 更新の間隔
	localStorage.setItem('last_cached',d1);
	if (navigator.onLine) {
		applicationCache.update();
	}
}
</script>