html5通过ApplicationCache接口使离线存储成为可能,离线存储使得web应用可以在用户离线的状况下进行访问。这个技术有以下优点:
用户可以离线访问web应用
因为文件被缓存在本地使得web页面加载速度提升许多
离线应用只加载被修改过的资源,因此大大降低了用户请求对服务器造成的负载压力。
HTML5通过一个清单文件(manifest file)来管理离线缓存。这个清单文件实质就是一系列的URL列表文件,这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关资源。当使用离线应用时,应用会引入这一清单文件,浏览器会读取这一文件,下载相应的文件,并将其缓存到本地,使得这些web应用能够脱离网络使用。
Web版使用离线缓存缓存了html、css、js、图片等静态文件,这样用户在没有网络时,仍然可以进行浏览。在系统启动时,处理离线缓存和本地数据库更新操作,完成后,才能进入登陆页面。
2)怎样启用离线缓存
要开发一个离线的Web应用,需要具备以下几个条件:
• 编写一个manifest类型文件,列出需要通过浏览器缓存至本地的资源性文件。
如:
CACHE MANIFEST
# 指明缓存入口
CACHE:
index.html
style.css
images/logo.png
scripts/main.js
# 以下资源必须在线访问
NETWORK:
login.html
# 如果index.html无法访问则用404.html代替
FALLBACK:
/login.html /404.html
• 开发一个Web页面,通过<html>元素中的“manifest”属性将manifest文件与页面绑定。
如:
<html manifest="test.manifest">
...
</html>
• 对服务器端进行配置,使其能读取manifest类型的文件。
在web.xml里面添加:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
3)离线缓存的更新
以下三种情况能够更新离线缓存:
a、 用户手动清除离线缓存的数据
b、 修改Manifest文件。只修改manifest文件里罗列的某个文件是不会更新离线缓存的
c、 使用javascript api编写更新程序
applicationCache更新会触发相应的事件:onchecking(检查缓存是否需要更新),onerror(出错),onnoupdate(缓存已是最新的,不需要更新),ondownloading(下载中),onprogress(更新中),onupdateready(缓存更新完毕,创建缓存过程无此事件),oncached(第一次缓存完成,即创建缓存完成)和onobsolete(删除应用缓存,当应用缓存的 manifest url 响应 404、410)。Js中对这些事件进行监听,可在缓存更新的不同状态做相应的处理。