HTML5应用-applicationcache接口

Web资源本地化,提高访问性能,对于WebApp来说是一直以来追求的目录,好在HTML5提供了Application Cache特性。用来提供离线浏览和本地化资源文件。对于WebApp来说无疑是一个好消息,但是对于WebSite来说,这中间有利有弊,需要开发人员自己去评估自己的业务是否合适了,下面抛砖来阐述一下applicationCache的一些优势和需要注意的问题以及相关的接口说明。

【图一】没有使用Application Cache技术时的Timeline

【图二】使用Application Cache技术时的Timeline

其它的不细说,下面具体说一下Application Cache的使用和注意事项。

1)支持浏览器

Chrome / Safari 5+ / IE 10+ / Opera

2)优势

离线浏览,用户离线状态下能访问你的站点。

高速,将资源文件缓存到本地,更快的加载。

减少服务器负载,浏览器仅仅下载改变的资源文件或没有在缓存列表里的文件。

3)如何使用?

创建manifest文件

在HTML页面中引用manifest文件

在服务器添加mime-type text/cache-manifest

4)manifest结构

CACHE MANIFEST

#缓存文件列表

ResourceURL

#可选片断

NETWORK:

ResourceURL

CACHE:

ResourceURL

FALLBACK:

ResourceURL fallBackURL

CACHE

这是一个默认片断,在这个片断下的文件列表将会在首次下载后明确缓存起来。

NETWORK

这是一个白名字的资源文件列表,这个列表将需要访问服务器。即使用户离线了所有的资源都会绕过缓存来请求服务器。可以使用通配符。

FALLBACK

可选片断,该片断描述资源文件不可访问时指定替换的页面。该片断有2个值,第一个URI为资源文件,第二个URI为替换页面。可以使用通配符。

注意:第一行必须是 CACHE MANIFEST

注释使用#字符开头

5)如何更新

用户清除浏览器的数据

修改manifest文件(修改列表中的文件并不意味着浏览器将会重新缓存资源文件,必须是manifest文件本身被修改)。

用程序来更新

6)相关API

类别 字段 说明
常量 0 – UNCACHED If the page is not linked to the application cache. Also, the the very first time the application cache is being downloaded, then during the time it is being downloaded, the AppCache will have a status of uncached.
1 – IDLE When the browser has the latest version of the AppCache, and there aren no updated versions to download, then the status is set to Idle.
2 – CHECKING The duration of when the page is checking for an updated manifest file, then the status is set to checking.
3 – DOWNLOADING The duration of when the page is actually downloading a new cache (if an updated manifest file has been detected), the status is set to downloading
4 – UPDATEREADY Once the browser finishes downloading that new cache, it is ready to be used (but still not being used yet). During this time, the status is set as updateready
5 – OBSOLETE In case the manifest file cannot be found, then the status is set to obsolete and the application cache gets deleted. It is important to know, that in case the manifest file (or any file mentioned in the manifest file except those which have a fallback) fail to load, then it will be counted as an error and the old application cache will continue to be used.
事件 checking This gets fired when browser is checking for attempting to download the manifest for the first time, or is checking if there is an updated version of the manifest file.
noupdate If there is no updated version of the manifest file on the server, then noupdate is fired.
downloading If the browser is downloading the cache for the first time, or if is downloading an updated cache, then this is fired.
progress This is fired for each and every file which is downloaded as part of the AppCache.
cached This is fired when all the resources have finished downloading, and application is cached.
updateready Once resources have finished re-downloading for an updated cached file, then updateready is called. Once this happens, then we can use swapCache() (as explained later in the article) to make the browser to use this newly updated cache.
obsolete This is fired if the manifest file cannot be found (404 error or 410 error).
error
属性 status 状态(参考常量)
方法 abort() 中断
swapCache() 交换缓存
update() 更新
addEventListener() 添加事件
removeEventListener() 移除事件
dispatchEvent 派生事件

NOTE:

■ CACHE MANIFEST是必须的并且要放在第一行
■ 每个站点缓存数据大小为5MB空间,不过,如果你正在编写Chrome Web Store应用程序,可以通过unlimitedStorage来去除这个限制
■ 假如manifest文件或指定的资源文件下载失败或整个缓存更新失败。在发生异常情况下浏览器将继续使用旧的Application Cache。
■ 如果有修改资源文件,必须通过修改manifest文件来刷新被缓存的文件列表
■ 引用manifest文件的HTML页面将会被自动缓存,不需要在manifest文件中体现。所以在动态页面(如CGI,JSP,PHP等)中,可以用iframe一个静态页面来专门加载manifest文件。
■ HTTP缓存头和通过SSL服务的页面缓存限制由缓存清单重写,因此,通过HTTPS提供的网页可以离线工作。
■ 当manifest文件初始化和有更新时,浏览器会重新拉取manifest文件里配置的资源,考虑到性能问题,做cache时需要评估好放在这里面的合理性。

————————————————

【参考资源】

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW1

http://dev.opera.com/articles/view/offline-applications-html5-appcache/

https://developer.mozilla.org/en/Using_Application_Cache

http://msdn.microsoft.com/en-us/library/IE/hh673545(v=vs.85).aspx

http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html