也来谈谈html5离线缓存

来源：互联网发布：cf无限榴弹软件编辑：程序博客网时间：2024/06/04 09:24

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:

# 如果index.html无法访问则用404.html代替

FALLBACK:

/login.html /404.html

• 开发一个Web页面，通过<html>元素中的“manifest”属性将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中对这些事件进行监听，可在缓存更新的不同状态做相应的处理。