html5离线缓存--manifest

移动web和移动app一直都是在其各自的领域内,各司其职,井水不犯河水。web端只要有浏览器,便能看遍天下网站,但是完全离不开网络,app则强大到无所不能,但是用必须要下载。各有各的优势,各有各的局限,直到html5的出现,两者的界限不断被刷新,webapp开始被广泛使用。说到这里,不得不提到h5中推出的一个离线缓存的新特性,正是它,大大拉近了web与app的距离。废话不多说,开讲--manifest

一、如何使用

接触过h5和安卓的同学,应该都有一种感觉,h5就是在模仿app干的事,Android里面也有个小伙伴叫做manifest。离线缓存中最主要的就是这个xxx.manifest文件,我一般起名叫做cache.manifest,文件格式如下:

CACHE MANIFEST
#v1.2.0

CACHE:
bbs_detail_app.css
bbs_detail_app.js
zepto.js

NETWORK:
*

FALLBACK:
index.html offline.html


文件必须以CACHE MANIFEST开头,接下来是记录的版本号,#v(version),至于版本号的格式似乎是没有特别的界定的,只要不同版本有区别即可。

接下来看到的是CACHE,表明以下的文件是会在客户端进行缓存的文件,且一行记录一个文件名,CACHE关键字可以去掉,除了最顶上两行manifest以及版本说明外,列在最上面的文件默认是缓存文件,NETWORK后的文件表示每次都需要从网络去取,若CACHE中定义的文件名与NETWORK中有重复的,则先在缓存中取,若缓存中没有,则从网络中取得。FALLBACK定义的文件是当index.html文件读取失败,则用offline.html代替。

HTML页面中的调用如下:

<html manifest="cache.manifest">


是不是觉得很厉害,

但是离线缓存更加适用于资源异步加载的静态页面,在离线缓存中,URL严格相同的页面才会被认为是同一个请求,缓存才会起效,

例如两个地址一致的url:url1:http://test.com/test.html?id=1;url2:http://test.com/test.html?id=2;

这两个其实并不是同一回事,当url1进行缓存后,访问url2时,不会使用请求url1时的缓存。因此,若使用此利器,最好页面静态化,保持页面请求url时一致,所有资源请求使用ajax进行异步请求。

另外,使用离线缓存还有一个优势,可以很大程度帮助我们解决浏览器端的缓存问题,只要manifest版本信息不变,永不更新,我们想要更新资源,只需要更新版本号即可,特别是在移动端缓存的清理一直是个问题,很有帮助。

二、缓存的更新机制

manifest离线缓存使用过程中会出现一点点问题,这里我们分析一下他的缓存加载以及更新机制。当用户第一次加载,浏览器会请求包括manifest在内的所有文件,并对manifest中的内容进行解析,该缓存的缓存。下次请求的时候,首先从缓存中取出manifest文件,里面记录需要缓存的文件会直接从缓存中读取出来,然后去网络请求网络中的manifest以及其他需要的文件,最后,会进行manifest的版本对比,若版本不变,则没啥变动,若manifest版本有所变化,那则会继续请求网络取出需要缓存的文件进行本地缓存的更新,但是此时,已经渲染的页面不会进行重新刷新,所以即使服务端更新manifest后,客户端刷新第一次其实取得还是上一次缓存的文件,第二次刷新才是服务端更新后的文件,这是离线缓存刷新机制所决定的,会有一点体验上的问题,但是这个问题我们可以用代码进行手动缓存的刷新解决,调用cache.update()进行缓存刷新,cache.swapCache()进行重新请求更新的资源进行渲染。


以上是个人在项目以及学习中的一些浅显的总结,在此分享一下,若有失误,请指出。

你可能感兴趣的:(html5,Manifest,离线缓存,手动更新)