<!-- 注意：
文件中的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:
*
以上是本地测试例子的代码，记录以备后期回顾。