**干什么用的？
**
离线缓存为的是第一次请求后，根据manifest文件进行本地缓存，并且在下一次请求后进行展示（若有缓存的话，无需再次进行请求而是直接调用缓存），最根本的感觉是它使得WEB从online可以延伸到了offline领域。
应用场景
h5游戏及一些页面内容不经常会变动，相对较为固定的内容。
怎么用的？
若想使用manifest功能，需要在需要进行缓存功能的html文件之中写入 声明
<meta manifest = ‘demo.appcache’> // 这个文件格式是官方推荐的
这里，若遇到如此报错
Application Cache Error event: Manifest fetch failed (404)
其原因是因为 manifest文件需要正确的配置MIME-type（描述该消息的媒体类型），即
“text/cache-manifest”，必须在服务器端进行配置。
manifest文件如何进行配置？
首先manifest分为三个部分
1、CACHE MANIFEST //指出需要进行manifest的文件，此文件将会在首次下载后被缓存下来
CACHE MANIFESTCACHE:/index.css/index.html/index.js
2、NETWORK //指出需要向服务器请求即不需要manifest的文件，此文件不会被缓存，若为*则表示所有文件均需要进行网络请求，而不使用缓存。
NETWORK:*
3、FALLBACK //指出当页面无法进行访问时，显示的页面（替换的页面），例子中，当html5文件夹中的文件出现异常情况，，使用404.html页面替换掉异常页面 （第一个uri路径是资源地址，第二个是备胎地址）
FALLBACK:/html5/ /404.html
完整的实例
CACHE MANIFEST# 2017-04-06 v1.0.0
CACHE:/theme.css/logo.gif/main.js
NETWORK:login.asp
FALLBACK:/html5/ /404.html
注意：这里的版本号，是我们人为规定的，而非是manifest自带的属性，当每一次html加载到manifest时，会对manifest配置文件进行脏检查，当检测到manifest文件被修改后，之前的缓存将会被弃用，转而去根据manifest文件中配置的新内容进行缓存。
查看：
670E294B-9EB2-48F9-9C1B-4885FD7AD37E.png
被缓存的文件可以使用谷歌浏览器进行查看: f12 -> Application -> Application Cache
ftchinese 手机版使用了离线缓存技术，可以去看下其源码以及缓存的文件是如何进行存储的
问题！
manifest除了缓存manifest.appcache文件所指定的资源外，还必定会缓存当前的html页面，即
<meta manifest=‘demo.appcache'>
标签所在的页面以及demo.appcache文件里面所规定的静态资源一并存入 application Cache 之中。
当用户再一次访问该页面时，demo.appcache文件之中CACHE MANIFEST所指向的资源就不需要重新进行加载了，但是问题是，当前的html页面也会跟着cache直接读出来了，可能会造成即使 我们的页面更新了，但是用户还是看的老旧版本页面（因为更新mainfest的时候，页面加载已经开始了，但是缓存更新却尚未完成，浏览器还是会使用缓存的资源，当浏览器检测到了Application Cache有更新时，本次不会使用新的资源，下一次才会进行使用）
解决方案：
applicationCache.addEventListener("updateready",function(){
applicationCache.swapCache(); // 手工更新本地缓存
location.reload(); //重新加载页面页面
},true);````
添加事件监听，当监听到本地缓存更新后，进行重载页面，以达到更新的目的。
****
**写在最后：**
**这是本人第一篇简书，文笔难免稚嫩，希望各位前辈能够不吝批评与建议，祝各位工作顺利。**
网友评论