h5-应用级缓存

Posted fengbrother

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5-应用级缓存相关的知识,希望对你有一定的参考价值。

1.html代码及css代码

 1 <!DOCTYPE html>
 2 <!--manifest="应用程序缓存清单文件的路径   建议文件的扩展名是appcacje,这个文件的本质就是一个文本文件"-->
 3 <html lang="en" manifest="demo.appcache">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         img
 9             width: 300px;
10             display: block;
11         
12     </style>
13 </head>
14 <body>
15 <img src="../img/a.jpg" alt="">
16 <img src="../img/b.jpg" alt="">
17 <img src="../img/c.jpg" alt="">
18 <img src="../img/d.jpg" alt="">
19 <img src="../img/e.jpg" alt="">
20 
21 </body>
22 </html>

2.demo.appcache文件

 1 CACHE MANIFEST
 2 #上面一句代码必须是当前文档的第一句
 3 
 4 #需要缓存的文件清单列表
 5 CACHE:
 6 #需要缓存的清单列表
 7 ../img/a.jpg
 8 ../img/b.jpg
 9 # *:代表所有文件
10 
11 #配置每一次都需要重新从服务器获取的文件清单列表
12 NETWORK:
13 ../img/c.jpg
14 
15 #配置若果文件无法获取则使用指定的文件进行代替
16 FALLBACK:
17 ../img/d.jpg ../img/f.jpg
18 # /:代表所有文件

 

以上是关于h5-应用级缓存的主要内容,如果未能解决你的问题,请参考以下文章

H5应用程序缓存浅谈及实际测试

H5应用程序缓存 - Cache manifest

H5 应用程序缓存(离线缓存)

H5 缓存机制浅析 移动端 Web 加载性能优化

webview和h5数据传递

应用级缓存