**干什么用的?
**
离线缓存为的是第一次请求后,根据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文件中配置的新内容进行缓存。
查看:
被缓存的文件可以使用谷歌浏览器进行查看: 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);````
添加事件监听,当监听到本地缓存更新后,进行重载页面,以达到更新的目的。
****
**写在最后:**
**这是本人第一篇简书,文笔难免稚嫩,希望各位前辈能够不吝批评与建议,祝各位工作顺利。**