代码改变世界

html5之应用缓存示例

2016-01-27 14:50  妙笔生花  阅读(192)  评论(0)  编辑  收藏  举报 
<!-- 注意： 
　　文件中的IP是服务器访问地址；
　　test.manifest文件 跟 index.html文件目录 必须在同一域下，但是test.manifest文件中配置的缓存文件可不再同一域下；
　　此处代码是通过 IIS.exe免安装版配置 进行测试，文件是否从缓存中来，可通过 chrome浏览器控制台查看。
-->
index.html 文件内容
<!doctype html>
<html lang="en" manifest="test.manifest">
 <head>
  <title> html5离线缓存示例1 </title>
  <meta charset="utf-8">
  <meta name="description" content="html5离线缓存示例1">
 </head>

 <body>
    <div id="infoDiv"></div>
    <img id="loadImg" src="/image/loading.gif" style="display: none;"/>
    <img src="http://IP/res/img/images/icon_1.gif" alt="">
    <img src="http://IP/res/img/images/icon_2.gif" alt="">
<p>

<script>
//检测是否有新的缓存在页面加载 
 window.addEventListener('load', function(e) { 
   var appCache = window.applicationCache;
   appCache.addEventListener('error',appCacheError , false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
   appCache.addEventListener('obsolete', obsoleteEvent, false);
   //添加手工检查代码-1分钟检查一次
   setInterval(function(){
        appCache.update();
   },60000);

   function obsoleteEvent(event){
     console.log("缓存过时");
   }

   function onUpdateReady(event) {
      var updateFlag = confirm('本地缓存已被更新，需要刷新页面来获取应用程序最新版本，是否刷新？');
      if(updateFlag){
        window.applicationCache.swapCache(); //调用swapCache实时更新缓存；不调用，下次页面刷新更新
        //alert("本地更新应用缓存并从新加载页面，获取新的页面信息 ");
        document.getElementById('infoDiv').innerHTML = "更新完成,1s后刷新";
        setTimeout(function(){
            window.location.reload(); 
        },1000)
      }
    }

    function appCacheError(event){
        console.log("下载失败");
        document.getElementById('infoDiv').innerHTML = "缓存过程中，有文件下载失败";
        document.getElementById('loadImg').style.display = "none";
    }

    function checkingEvent(event){
        console.log("cheking中");
        //document.getElementById('infoDiv').innerHTML = "cheking中";
        document.getElementById('loadImg').style.display = "none";
    }

    function noUpdateEvent(event){
        console.log("未发现新版本");
        document.getElementById('infoDiv').innerHTML = "";
        document.getElementById('loadImg').style.display = "none";
    }

    function downloadingEvent(event){
        console.log("下载中");
        document.getElementById('infoDiv').innerHTML = "下载中";
        document.getElementById('loadImg').style.display = "block";
    }

    function progressEvent(event){
        var total = event.total;
        var loaded = event.loaded;
        var per = parseInt((loaded / total) * 100);
        console.log("进度条"+per);
        document.getElementById('infoDiv').innerHTML = "初始化加载进度："+per;
        document.getElementById('loadImg').style.display = "block";
    }

    function updateReadyEvent(event){
        document.getElementById('infoDiv').innerHTML = "";
        document.getElementById('loadImg').style.display = "none";
        //判断.appcache是否变更 
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 
          onUpdateReady();
        } else { 
           //.appcache清单没有改变， 对服务器没有新的请求 
        } 
    }

    function cachedEvent(event){
        console.log("结束");
        document.getElementById('infoDiv').innerHTML = "";
        document.getElementById('loadImg').style.display = "none";
    }

 }, false);
</script>
 </body>
</html>

test.manifest 文件内容
CACHE MANIFEST
#datestamp1451013353845
http://IP/res/img/images/icon_1.gif

http://IP/res/img/images/icon_3.gif
http://IP/res/img/images/icon_4.gif
http://IP/res/img/images/icon_5.gif
http://IP/res/img/images/icon_6.gif
http://IP/res/img/images/icon_7.gif
http://IP/res/img/images/icon_8.gif
http://IP/res/img/images/icon_9.gif
http://IP/res/img/images/icon_10.gif
http://IP/res/other/resources/wav/Numbers/0.wav
http://IP/res/other/resources/wav/Numbers/1.wav
http://IP/res/other/resources/wav/Numbers/2.wav
http://IP/res/other/resources/wav/Numbers/3.wav


NETWORK:
*

以上是本地测试例子的代码，记录以备后期回顾。