随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出的一个新的特性:离线存储。通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样即使在离线的情况下,用户也可以正常使用App。 首先来讲解下离线存储的使用方法,说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。 然后cache.manifest文件的书写方式,就像下面这样: 离线存储的manifest一般由三个部分组成: 1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。 2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。 3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。 浏览器怎么解析manifest 那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。 这个过程中有几个问题需要注意。 对于HTML5中离线存储对象window.applicationCache有几个事件需要我们关注下: 1.oncached:当离线资源存储完成之后触发这个事件 2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件 3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件 4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。 5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件 6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html