HTML5的离线应用

参考：有趣的HTML5：离线存储——segmentfault

HTML5的离线存储

简介

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个。通过浏览器访问Web App需要联网发送请求，这样就使得用户在离线的状态下无法使用App，但是Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于这些原因，HTML5提出了离线存储的新功能。

离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。

 

用法

1、缓存清单manifest 

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK:
    online.html offline.html

CACHE: 指定你要浏览器进行离线存储的文件列表，一个文件一行
NETWORK: 跟CACHE相反,指定浏览器一定要通过网络访问的文件列表
FALLBACK(可选): 如果通过网络访问失败了，就去访问紧跟着的那个在本地缓存好的文件文件

指定上述文件，可以用相对路径，也可以用绝对路径，都是ok的。但是绝对路径要加上http://

编辑好这个文件以后就在html文件中引入这个文件浏览器就可以知道要缓存那些文件了。

 

2、浏览器怎么解析manifest

浏览器对离线的资源进行管理和加载的

• 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，

如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会根据HTTP的缓存策略去探测manifest清单是否最新版本，如果最新，就不做任何操作，如果不是最新，那么就会重新下载文件中的资源并进行离线存储。

• 离线的情况下，浏览器就直接使用离线存储的资源。

注意：

• 如果服务器对离线的资源进行了更新，那么必须更新manifest文件版本之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。

• 由于判断manifest清单是否最新是利用了HTTP的缓存策略的，所以可能出现你对manifest文件进行了更新，但浏览器还是使用原来的manifest文件的情况，这是因为http的缓存策略告诉浏览器本地缓存的manifest文件还没过期，所以对于manifest文件进行的缓存要十分小心。

• 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

• 在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

 

3、HTML5中对应的离线存储API

支持H5离线存储的浏览器使用window.applicationCache对象，在浏览器处理离线存储的期间触发各种事件，对象说明具体如下

1. oncached:当离线资源存储完成之后触发这个事件，这个是文档的说法，我在Chrome上面测试的时候并没有触发这个事件。
2. onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3. ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4. onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5. onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6. onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件