アプリケーションキャッシュ (5/5)
作成:2012-04-16 07:56
更新:2012-04-16 07:56
更新:2012-04-16 07:56
■キャッシュ関連イベントを利用する
では、一体どういうタイミングでswapCacheを呼び出せばいいのか。もっとも確実なのは、ダウンロードが完了し、更新の準備が整ってからです。「そんなのわかるもんか」――いいえ、わかるんです。ちゃんとそのためのイベントが用意されていますから。
applicationCacheオブジェクトには、さまざまな状況に応じて発生するイベントが用意されています。ざっと整理すると以下のようになるでしょう。
onchecking――マニフェストファイルの内容をチェックしているとき
onnoupdate――更新が不要と判断されたとき
ondownloading――キャッシュするデータをダウンロードしているとき
onprogress――更新処理が進行中のとき
oncached――キャッシュするデータのダウンロードが完了したとき
onupdateready――キャッシュの更新準備が完了したとき
onobsolete――キャッシュが消去されたとき
onerror――何らかのエラーがおきたとき
このイベントを利用することで、swapCacheのタイミングを確実なものにできます。では、下のリスト欄に修正したスクリプトを掲載しておきましょう。ここでは、最初にonupdatereadyイベントに関数を設定しています。
applicationCacheオブジェクトには、さまざまな状況に応じて発生するイベントが用意されています。ざっと整理すると以下のようになるでしょう。
onchecking――マニフェストファイルの内容をチェックしているとき
onnoupdate――更新が不要と判断されたとき
ondownloading――キャッシュするデータをダウンロードしているとき
onprogress――更新処理が進行中のとき
oncached――キャッシュするデータのダウンロードが完了したとき
onupdateready――キャッシュの更新準備が完了したとき
onobsolete――キャッシュが消去されたとき
onerror――何らかのエラーがおきたとき
このイベントを利用することで、swapCacheのタイミングを確実なものにできます。では、下のリスト欄に修正したスクリプトを掲載しておきましょう。ここでは、最初にonupdatereadyイベントに関数を設定しています。
applicationCache.addEventListener("updateready",function(){ここで、swapCacheを実行すれば、確実にキャッシュの更新が行えるようになるというわけです。この他にも、applicationCacheのイベント関係は、キャッシュの状況に応じて処理を実行させるのに役立ちます。実際にどういうときにどのイベントが発生するのか、それぞれで確かめてみると面白いでしょう。
applicationCache.swapCache();
alert("swap");
});
(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>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る