Html5之离线Web应用程序

2013-05-03更新:采用事件监听来优化二次刷新问题。

Html5一大新特性、同时也是非常吸引人的特性,就是其离线功能。它让Web从online延伸到了offline领域。

通过浏览器兼容性检查我们可以看到,除了IE9,几乎是全平台兼容此特性,让我们放开手脚去实现。

三部曲

1、准备manifest文件,格式如下。需注意里面的路径为相对manifest文件的路径

manifest编辑好后,保存为manifest.appcache。(很多老教程让我们保存成cache.manifest格式,不过我最近尝试过,要保存成appcache才能生效)

2、给HTML文档头部添加manifest清单支持

3、添加MIME类型,让服务器支持.appcache的文件类型

网上Apache的修改方式一大堆,我给来个nginx的,环境是Ubuntu 12.04

一些注意事项

上述三步之后,你就可以给你的应用添加离线功能,但是你会觉得用起来很别扭(起码一开始我是这样觉得的),有下面一些情况需要注意:

1、本地缓存更新时刻

浏览器第一次打开html文件的时候,访问manifest,下载所有缓存文件。

第二次打开html文件的时候,不论该html是否被添加到manifest的CACHE选项中,该html实际上已经被缓存,故此次打开,是加载的本地html。浏览器检查网络manifest是否有更新,如果有,下载新的manifest文件,并重新下载所有缓存内容。此时,新的本地缓存不会被显示,而是等待下次刷新页面后,才会显示。

2、使用Location.reload()来手动刷新页面

旧方案(不推荐):

每5s检查一次,并询问用户时候刷新页面,刷新页面后,新的本地缓存被显示出来。

新方案,监听updateready事件(推荐使用):

资料来源:http://www.html5rocks.com/zh/tutorials/appcache/beginner/

3、FALLBACK中的URL遵循同源规则,必须与manifest文件同源

我被这个问题纠结了好几天,一直搜索都找不到原因,一开始还怀疑是FALLBACK不支持ajax请求。

今天终于找到问题的原因:

Important All FALLBACK URLs must have the same origin as the manifest file. That is, they must be in the same domain and use the same access scheme.

参考资料