カテゴリー別アーカイブ: ApplicationCache

ApplicationCache API

HTML5 ApplicationCache APIを利用する場合の典型的なコード例

* ApplicationCacheを利用するためにはマニフェストファイルや.htaccessの設定なども必要です. この記事ではApplicationCache API, つまり, JavaScriptのコード部分のみを紹介しています.

document.addEventListener('DOMContentLoaded', function() {
    if (window.applicationCache) {
         //ApplicationCache APIが実装されていれば,
         //ページ読み込み時にキャッシュマニフェストを確認する処理が自動で実行される

         //キャッシュのダウンロードが完了して, 再度updateメソッドの呼び出しが可能になるタイミングで発生するイベント.
         //また, このイベント発生以降にswapCacheメソッドを呼び出すことで, 最新のキャッシュに更新することが可能となる.
         applicationCache.onupdateready = function() {
              //UPDATEREADY (4) -> 最新のキャッシュファイルを利用する準備が完了
             console.log(applicationCache.status === applicationCache.UPDATEREADY); // -> trueのはず

             //バックグラウンドでキャッシュを最新のものに更新
             applicationCache.swapCache();

             if (window.confirm('確認メッセージ')) {
                 //更新されたキャッシュの内容を反映するためにリロード
                 location.reload(false); //キャッシュを利用してリロード
             }
         };
     }
}

また, あまりないかもしれませんが, ページ読み込み時以外でもキャッシュマニフェストの確認処理を実行したい場合は, updateメソッドを明示的に呼び出す必要があります.

//1時間ごとにキャッシュマニフェストの確認処理を実行
window.setInterval(function() {
    if (window.applicationCache) {
        applicationCache.update();
    }
}, (60 * 60 * 1000));