Webアプリの更新について
動的に内容が変更されるWebアプリで
アプリケーションキャッシュを使うと
最初に読み込んだ画面を、
ずっとキャッシュし続けるため
更新されなくなってしまう
このため、動的にHTMLが変更かれる箇所では
アプリケーションキャッシュは使わない
また、アプリケーションキャッシュとして読み込んだファイルは
ブラウザーから明示的に更新をチェックしないと
キャッシュが更新されないことがある
このため、更新チェックのJavascriptなどを使わないと
更新できないWebアプリになる
このため、
キャッシュファイルの更新と
アプリケーションの更新をする必要がある
まず、キャッシュファイルの更新を検知してWebアプリを更新する方法
アプリケーションキャッシュを示す
applicationCacheでは
キャッシュファイルが更新されると発生する
updatereadyイベントが使える
この
updatereadyイベントを使うことで
更新チェックと
新しいバージョンへのアップデートができる
if(applicationCache){
applicationCache.addEventListener("updateready",function(){
if(confirm("新しいバージョンが利用できます。アップデートしますか？")){
//キャッシュのアップデートと画面の再読込
applicationCache.swapCache();
location.load();
}
},true);
}
これだけでも更新チェックとアップデートができるけど
コンテンツを更新しても
updatereadyイベントが発生しないこともある
そのため念のために
update()
を、使うことで
明示的にキャッシュの更新と、リソース再読込ができるようにしておく
使い方は
applicationCache.update();
とする
これは、ボタンなどで使うことで
再読込ボタンにすることもできる
HTMLで
<button type="submit" id="update">更新</button>
Javascriptで
$(document).on("click","#update",function(e){
//キャッシュのアップデートと画面の再読込
applicationCache.update();
location.load();
});
注意点としては、Androidだと
アプリケーションキャッシュを使うことで
画面遷移ができなくなることがある
このため、Androidでは、Ajaxによる画面遷移を無効化しておく
if(navigator.userAgent.match(/Android/)){
$.mobile.ajaxEnabled = false;
}
match()は正規表現
マッチするものを調べるやり方
詳しくはドットインストールの正規表現を参考にするとわかりやすい