HTML5离线Web应用实战：五步创建成功

【IT168 技术】HTML5近十年来发展得如火如荼，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。HTML功能越来越丰富，支持图片上传拖拽、支持localstorage、支持web sql database、支持文件存储api等等。它任重而道远，致力于将Web带入一个更为成熟的应用平台。在所有炫酷特性中，最让我喜欢的是它具有离线缓存Web应用的功能。

　　开发离线Web 应用程序：三大核心功能

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

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

　　2. 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。

　　3. 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

　　HTML5推出的 “Web Storage”(Web 存储)API

　　为了弥补cookie容量小存在的缺陷，WebStorage可以解决轻量级的存储。HTML5推出的 “Web Storage”(Web 存储)API，它包括 localStorage 和 sessionStorage，可以存储简单对象(如应用程序状态)，使用本地和会话存储能够很好地完成，但是对大量的结构化数据进行处理时，需要用到 HTML5 的“Web SQL Database” API 接口。

　　在HTML5中网络存储按照生命周期分为2种，一种是基于会话(session),这种存储周期只是当前会话，当网页[注1]被关被后，或者被转到其他网站后，存储也就被销毁;

• 　　sessionStorage.varName = “生成新变量”;
• 　　sessionStorage.varName = “变量操作”;
• 　　delete sessionStorage.varName; //删除变量

　　另外一种是本地存储，当网页下次被打开的时候，你仍然可以访问上次打开该网页时存储的数据，比如本地存储的网站用户名就可以使用这种方式。

　　用法和基于会话的存储一样，只是前缀名改成了localStorage

• 　　localStorage.varName = “生成新变量”;
• 　　localStorage.varName = “变量操作”;
• 　　delete localStorage.varName; //删除变量

　　Web Storage

   // use localStorage for persistent storage

　　// use sessionStorage for per tab storage

　　saveButton.addEventListener('click', function () {

　　    window.localStorage.setItem('value', area.value);

　　    window.localStorage.setItem('timestamp', (new Date()).getTime());

　　}, false);

　　textarea.value = window.localStorage.getItem('value');

　　

　　离线存储HTML5 Web SQL Database

　　Web SQL Database 提供了基本的关系数据库功能，支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据，也可以作为从服务器获取数据的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web SQL Database 支持数据库事务的概念，从而保证了即使多个浏览器窗口操作同一数据，也不会产生冲突。

　　它还引入了一套使用 SQL 来操纵客户端数据库(client-side database)的 API，这些 API 是异步的(asynchronous)。所使用的 SQL 语言为 SQLite 3.6.19。其中 SQLite 是一款轻型的数据库，占用资源非常低，支持 Windows/Linux/Unix 等主流操作系统，同时能够跟很多程序语言相结合，如 C#，PHP，Java，JavaScript 等，比起 Mysql，PostgreSQL 这两款开源的数据库管理系统来说，它的处理速度更快。目前iOS和Android平台支持运行Web SQL Database。

　　var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB

　　db.transaction(function(tx) {

　　　　tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);

　　});

　　Web Workers

　　main.js:

　　var worker = new Worker('task.js');

　　worker.onmessage = function(event) { alert(event.data); };

　　worker.postMessage('data');

　　task.js:

　　self.onmessage = function(event) {

　　　　// Do some work.

　　　　self.postMessage("recv'd: " + event.data);

　　};

　　

　  HTML5 IndexedDB:轻量级NoSQL数据库

　　IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NoSQL数据库。

　　w3c为IndexedDB定义了很多接口，其中Database对象被定义为IDBDataBase。

　　浏览器对象中，实现了IDBFactory的只有indexedDB这个实例。

　　五步创建HTML5离线Web应用

　　在HTML5提供的所有炫酷功能里，创建离线缓存网页是我最喜欢的一个特性，以下是五步快速创建HTML5离线Web应用的步骤

　　1. 第一步：创建一个有效的HTML5文档，HTML5 doctype比xhtml更易于识记。

　　创建一个名为index.html的文件，这里学习如何使用CSS3来策划网站布局。

　　http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

　　2. 新增.htaccess支持

　　我们要创建的缓存页面称为manifest文件，假设你所使用的服务器是Apache，我们在创建文件之前，需要往.htaccess文件新增一个指令。

　　打开.htaccess文件，该文件部署在网站的根目录下，新增以下代码：

AddType text/cache-manifest .manifest

　　该指令可以确保每一个.manifest文件文本高速缓存。如果该文件不存在，整个缓存效果就无法实现，页面也不能实现离线缓存。

　　3. 创建.manifest文件

　　在我们创建好了.manifest文件后，事情就变得有趣多了。创建好新文件，命名为offline.manifest，嵌入以下代码。

CACHE MANIFEST

　　#This is a comment

　　CACHE

　　index.html

　　style.css

　　image.jpg

　　image-med.jpg

　　image-small.jpg

　　notre-dame.jpg

　　现在你拥有了一个完美的manifest列表。其实原理很简单，在声明CACHE后，你可以列出自己想要离线缓存的文件。这个对于缓存一个简单的网页，已经是绰绰有余了，而HTML5的缓存有其它一些有趣的功能。

CACHE MANIFEST

　　#This is a comment

　　CACHE

　　index.html

　　style.css

　　NETWORK:

　　search.php

　　login.php

　　FALLBACK:

　　/api offline.html

　　在这个示例中，manifest文件声明了CACHE，用于缓存index.html和style.css。同时，我们声明了NETWORK，用于指定不被缓存的文件，比如登录页面。

　　最后声明的是FALLBACK，这个声明允许将用户转入一个指定的页面，比如本例中如果不打算离线查看API资源的话，可以转向Off.html页面。

　　4. 将manifest 文件链接到HTML文档中。

　　在manifest文件和主要的html文档准备好了以后，你唯一还需要做的事情是将manifest文件链接到html文档中。

　　操作方法很简单，只需在html元算中添加manifest 属性，代码如下：

　　5. 测试