色々調べながら作成したソースを書いてみた。
JavaScriptアップデートチェッカー
//var ua = navigator.userAgent;
//if(!/iPad/.test(ua) && !/OS 4/.test(ua)){
// applicationCache未実装のIE9以下やオフライン時は無視する。
if( window.applicationCache && navigator.onLine) {
var div;
var making = true;
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached_リソースをキャッシュしていない状態である';
cacheStatusValues[1] = 'idle_必要な処理は無く、待機状態である';
cacheStatusValues[2] = 'checking_更新データが存在するかチェック中である';
cacheStatusValues[3] = 'downloading_更新を検出したので更新データをダウンロード中である';
cacheStatusValues[4] = 'updateready_更新データをダウンロード済みであり、キャッシュの更新が可能である';
cacheStatusValues[5] = 'obsolete_マニフェストファイルへのアクセスに失敗したので、アプリケーションキャッシュを削除した状態である';
var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);
function logEvent(e) {
var message;
message = 'applicationCacheイベント: ' + e.type;
message+= ', ステータス: ' + cacheStatusValues[cache.status];
if (e.type == 'error') {
message+= ' (マニフェストファイルに、おそらく構文エラーがあります)';
}
console.log(message);
console.log(e.type+'' == 'progress');
if( e.type+'' == 'progress' && making ){
making = false;
div = document.createElement('div');
style = 'position:absolute;top:0px;left:0px;width:'+ screen.width + 'px;height:'+screen.height + 'px;background-color:#000;';
div.setAttribute('style', style );
div.setAttribute('id' ,'loader');
document.getElementById('wrap').appendChild(div);
}
if( e.type+'' == 'noupdate' && making == false ){
document.removechild(document.getelementbyid('loader'));
making = true;
}
//*/
}
cache.addEventListener('updateready',function(){
if(confirm("このサイトの最新バージョンが利用可能です。アップデートしますか？")){
cache.swapCache();
// 既にOffline Cacheがあるので、リロードは高速
window.location.reload();
}
},false);
setInterval(function(){cache.update()}, 10000);
}
//}
manifestファイルについて
色々なサイトで共通しているのは拡張子をmanifestにしてhtaccessをうんたらって書いてあるけど、実際は拡張は何でも良い模様
事実、こんなコードでも普通にmanifestとして動作した。
manifest.php
<?php
header('Content-Type: text/cache-manifest; charset=utf-8');
echo <<< EOF
CACHE MANIFEST
# version 20121121aaaaaaaaaaaa
CACHE:
#キャッシュするリソース
$dirlist = array(
'img',
'css',
'js',
'xml'
);
foreach( $dirlist as $value ){
$dir = opendir( realpath( dirname(__FILE__) . "/{$value}" ) );
while( $file = readdir( $dir ) ){
if( !preg_match('/^\..*/', $file ) ){
echo "./{$value}/{$file}\n";
}
}
closedir($dir);
}
?>
NETWORK:
#キャッシュしないリソース
#外部ドメインのリソースはすべて記述する（すべての場合は、ワイルドカード *）
FALLBACK:
#代替リソース
html側
<!DOCTYPE html>
<html manifest="manifest.php">
.....
0 件のコメント:
コメントを投稿