<!DOCTYPE HTML>
<html manifest="offline.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.1.0-rc.1.event.js"></script>
<style>
#toast {
  position: fixed;
  width: 70%;
  right: 15%;
  bottom: 30%;
  color: #fff;
  border-radius: 1em;
  padding: 2%;
  overflow: hidden;
  text-align: center;
  font-size: 1.5em;
  overflow: hidden;
  background-image: -webkit-gradient(linear, 100% 0%, 71% 100%, from(#424242), to(#3D3D3D), color-stop(1, #303030) );
  bottom: 30%;
}
</style>
</head>
<body style="background: none">
  <div id="toast">正在检查更新...</div>
  <!-- 弹出框容器 -->
  <div id="layer">
    <div class="tips-map">
      <div class="tips-dt">提示</div>
      <p class="box box1">确认退出?</p>
      <div class="btn-div">
        <img src="images/ok_1.png" class="definite" alt="确定"><img src="images/cancel_1.png" class="cancel"
          alt="取消">
      </div>
    </div>
  </div>
</body>
</html>

<script>
  var toast = document.getElementById("toast");
  //判断是更新还是初始化
  var version = localStorage.getItem('version');
  var initOrUpdate = '更新';
  console.log('version:' + version);
  if (version == '' || version == null) {
    initOrUpdate = '初始化';
  }
  //更新处理
  var cache = window.applicationCache;
  var loaded = 0;
  var total = 165;
  cache.addEventListener('progress', function(e) {
    console.log(loaded);
    var progress = Math.round(100 * loaded / total);
    if (progress > 100) {
      progress = 100;
    }
    loaded++;
    message(initOrUpdate + '系统,已完成' + progress + "%");
  }, false);

  /*onupdate事件表示:没有更新。 */
  cache.addEventListener('noupdate', function() {
    location.href = 'login.html';
  }, false);

  /*oncached事件表示:第一次加载完成。 */
  cache.addEventListener('cached', function() {
    message(initOrUpdate + '完成');
    localStorage.setItem('version', 0);
    location.href = 'login.html';
  }, false);
  /*onupdateready事件表示:更新已经处理完成,新的缓存可以使用。*/
  cache.addEventListener('updateready', function() {
    message(initOrUpdate + '完成');
    localStorage.setItem('version', parseInt(version) + 1);
    cache.swapCache();
    location.href = 'login.html';
  }, false);

  function message(msg) {
    toast.innerHTML = msg;
  }

  // 退出
  window.onmessage = function(e) {
    var data = eval('(' + e.data + ')');
    if (data.target == 'back') {
      $("#layer").show();
      $('.definite').bind('vmouseup', function() {
        window.parent.postMessage('{target:"exitnow"}', "*");
      });
      $('.cancel').bind('vmouseup', function() {
        $("#layer").hide();
      });
    }
  };
</script>

offline.manifest

CACHE MANIFEST
#version 2.0.0.0
#dev-version 20121219180022
CACHE:
./css/public.css
./css/reset.css
./css/style.css
./js/Entities.js
./login.html
./index.html
./register.html
NETWORK:
*
FALLBACK: