HTML 5离线Web应用（整理）

来源：互联网发布：冒险岛自由市场数据编辑：程序博客网时间：2024/05/21 10:52

一、开发支持离线Web 应用的目的：

随着互联网的发展，用户提交的数据渐渐成为互联网的主流。那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。

二、在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：

1.离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML 5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。

2.在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML 5 中，提供了两种检测当前网络是否在线的方式。
3.本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML 5 提供了 Web Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

三、三个功能的具体分析

1.离线资源缓存：

客户端的浏览器需要知道哪些文件需要缓存，这就需要依靠manifest文件来整理。
manifest文件把指定的文件类型分为3类：
CACHE是要缓存的文件；

NETWORK是不需要缓存的文件；

FALLBACK是如果找不到文件，替换出现的文件

实例：下面说说具体如何实现缓存资源文件。

首先，将一个页面标为离线存储页面，需要给html标签绑定一个manifest属性指向离线配置文件：

<!doctype html><html manifest="test.manifest" type="text/cache-manifest"><head>    <meta charset="UTF-8">    <title>Document</title><link rel="stylesheet" href="css/a.css"><script src="js/a.js"></script><script src="js/b.js"></script></head><body></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

test.manifest文件内容如下：

CACHE MANIFEST#v0.1.0CACHE:js/a.jscss/a.cssNETWORK:js/b.jsFALLBACK:404.html

2. 在线状态检测：

HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。

（1）navigator.onLine
navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。
（2）online/offline 事件
当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

3. 本地数据存储：

HTML 5 中新引入了 Web Storage 机制，见另一篇文章：http://blog.csdn.net/sinat_27346451/article/details/70859174

四、浏览器网页缓存与本地缓存的区别

1.浏览器网页缓存主要是为了加快网页的加载速度，它会对每一个打开的网页都进行缓存操作；而本地缓存是为Web应用程序服务的，只缓存那些指定缓存的网页；

2.在网络连接的情况下，浏览器网页缓存一个页面的所有文件，但若离线，用户再单击时将会得到一个错误信息；而本地缓存在离线时，仍然可以正常访问

3.对于网页浏览者而言，浏览器网页缓存了哪些内容和资源，这些内容是否可靠等都不知道；而本地缓存的页面是编程人员指定的内容，安全方面相对可靠。

阅读全文

1 0