首页 > 标准研究 > HTML 5研究(1):离线Web应用程序

HTML 5研究(1):离线Web应用程序

2011年4月27日 发表评论 阅读评论

转载时请注明出处和作者联系方式: http://mogoweb.net mogoweb@gmail.com

(注:本文前半部分翻译自W3C上的Offline Web Applications文档)

HTML 5包含了几个新特性,致力于解决构建能够离线运行的web应用程序。这些特性包括SQL、离线应用缓存API、在线/离线事件和状态,以及本地存储API。

1. 简介

典型的在线Web应用程序只能在有Internet连接的时候使用。没有网络时,人们不再能够检查他们的电子邮件、浏览他们的日程表,也不能用在线工具准备发言。原生应用程序则具有这些特性:e-mail客户端在本地存储邮件,日历应用在本地存储安排,演示软件在本地存储数据文件。

此外,离线时,用户完全依赖于HTTP缓存,因为他们不能连接到服务器获取最新的拷贝。

针对这个问题,HTML 5提供了两种解决方案:基于SQL的数据库API本地存储数据,和离线应用HTTP缓存来保证无法连接到网络时也能使用应用程序。

2. SQL

HTML 5的客户端SQL数据库可以实现结构化的数据存储,如e-mail应用程序可以用来本地存储邮件。数据库API是异步的,保证用户界面不会被锁定。因为数据库交互可能横跨多个浏览器窗口,所以数据库API也支持事务(Transaction)。

您可以使用Window对象的openDatabase()方法创建数据库对象,该方法带四个参数:数据库名、数据库版本、显示名称和一个估计的大小(以字节为单位)。比如:

var db = openDatabase("notes", "", "The Example Notes App!", 1048576);

现在可以在该数据库上使用transaction()方法,transaction方法带1到3个参数:一个事务回调、一个出错时回调和一个成功时回调。transaction回调传人一个SQL事务对象,可以使用其executeSQL()方法。executeSQL()方法带1到4个参数:SQL语句、参数、SQL语句回调和SQL语句出错回调。SQL语句回调传出事务对象和SQL语句结果对象,可以用来获得数据行、最后插入的ID等等。

要完成记事本应用程序,需要添加如下代码:

function renderNote(row) {
  // renders the note somewhere
}
function reportError(source, message) {
  // report error
}
function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)',
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}
function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}

3.离线应用缓存API

保证用户在没有联网的时候仍能使用Web应用程序的机制就是html元素的manifest属性。该属性包含一个清单(manifest)的URI,清单指定了哪些文件将缓存。清单有一个text/cache-manifest MIME类型。一个典型的清单文件如下:

CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi

该文件指定缓存若干文件,也指定了server.cgi不应该缓存,访问该文件将绕过缓存系统。

清单可以像如下在HTML中声明:

<!DOCTYPE HTML>
<html manifest="cache-manifest">
...

server.cgi文件列入白名单(放在NETWORK部分),因此可以连接服务器获取更新,如下:

<event-source src="server.cgi">

(event-source元素是HTML 5新引入的,允许服务器推送更新到Web页面。)

转载时请注明出处和作者联系方式: HTML 5研究(1):离线Web应用程序 mogoweb@gmail.com

分类: 标准研究 标签:
  1. 2011年6月16日08:42 | #1

    马云语录:世界上最可怕的竞争就是:比你聪明的人还要比你勤奋。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.