html5 应用缓存

界面

 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

 

posted @ 2015-10-27 14:50  PiNgFan826  阅读(107)  评论(0)    收藏  举报