界面
1 <html manifest=‘manifest.appcache‘> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>application cache 离线缓存</title> 7 </head> 8 9 <body> 10 <h1>App Cache Demo</h1> 11 <ul> 12 <li><img src="img/1.jpg" alt="1.jpg"></li> 13 <li><img src="img/2.jpg" alt="2.jpg"></li> 14 </ul> 15 <script type="text/javascript"> 16 window.addEventListener(‘load‘, function(e) { 17 window.applicationCache.addEventListener(‘updateready‘, function(e) { 18 console.log(window.applicationCache.status); 19 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 20 window.applicationCache.swapCache(); 21 if (confirm(‘a ne version of this site is avaolable. load it?‘)) { 22 window.location.reload(); 23 } 24 } else { 25 console.log(‘manifest did not change‘); 26 } 27 }, false); 28 }, false); 29 </script> 30 </body> 31 32 </html>
manifest
CACHE MANIFEST
#version 1.0
#缓存文件
CACHE:
img/1.jpg
img/2.jpg
#每次下载文件
NETWORK:
*
#离线状况下代替文件
FALLBACK:
服务器端：apache conf/mime.types
添加一行
text/cache-manifest appcache
原文：http://www.cnblogs.com/vanliga/p/4914210.html