GoogleGears 创建可离线使用的 web 应用程序

GoogleGears 是一个开源的浏览器扩展，用于创建可离线使用的 web 应用程序，目前尚在 beta 阶段。

其主页地址在：http://code.google.com/apis/gears/
网上论坛：http://groups.google.com/group/google-gears/
Blog: http://gearsblog.blogspot.com/ (好像暂时不能访问了。。。）

GoogleGears 主要包含3个模块：

1. 本地 web 服务器（用于提供 HTML, JavaScript, 图片等的访问请求）
2. 数据库
3. WorkerPool
通过异步的方式在后台进行资源访问的操作（比如同步本地用户数据到服务器），使浏览器程序保持快速响应。

首先，需要安装 GoogleGears:
http://code.google.com/apis/gears/install.html

那么如何在自己的应用程序上线后，检查客户电脑上是否安装了 GoogleGears 呢？
首先必须在页面里面包含这一段 js：
http://code.google.com/apis/gears/tools/gears_init.js
然后，可以通过相关对象来判断并提示用户安装。
示例代码如下：

<script src="gears_init.js"></script>
<script>
if (!window.google || !google.gears) {
location.href = "http://gears.google.com/?action=install&message=<meil blog>" +
"&return=http://meil.livebaby.cn";
}
</script>
我们看到其中提示用户安装的地址允许定制两个自定义信息：

message: 用户提示信息，不超过150个字。
return: 安装完毕后返回的地址，也就是我们自己的 web 程序页面。

看一下 gears_init.js 会发现，对 Windows 而言，实际上 GoogleGears 在客户端安装了一个 ActiveX 对象：

factory = new ActiveXObject('Gears.Factory');
GoogleGears 的所有功能调用都是通过操纵该对象来完成的。

下面来学习几个例子。

1. 数据库 Demo
http://code.google.com/apis/gears/samples/hello_world_database.html

这个例子允许用户输入一些信息，并显示出最近输入的3条。在用户下次访问时仍然存在。
其界面如下：



首先在 HTML 页面里面包含如下代码，用于 gears 的安装探测，这个是每个页面必须的：

<script type="text/javascript" src="gears_init.js"></script>
下面执行一些初始化工作，并打开数据库：

// 数据库连接对象
var db;
init();

// 打开本页面对应的本地数据库.
function init() {
if (!window.google || !google.gears) {
return;
}
try {
db = google.gears.factory.create('beta.database', '1.0');
} catch (ex) {
setError('Could not create database: ' + ex.message);
}
if (db) {
db.open('database-demo'); // 打开数据库
// 创建表的语法
db.execute('create table if not exists Demo' +
' (Phrase varchar(255), Timestamp int)');

//
}
//
}

获取最新的3条记录，并删除其他老的记录的实现代码：

var recentPhrases = ['', '', ''];
try {
// 这里打开的实际上是一个记录集的游标(cursor)，和 ASP 的经典写法很类似。
var rs = db.execute('select * from Demo order by Timestamp desc');
var index = 0;
while (rs.isValidRow()) {
if (index < 3) {
recentPhrases[index] = rs.field(0);
} else {
// 这里可以看到 Tempstamp（时间戳）被当作主键使用了。
db.execute('delete from Demo where Timestamp=?', [rs.field(1)]);
}
++index;
rs.next();
}
rs.close();
} catch (e) {
throw new Error(e.message);
}
用户输入数据提交时，用如下逻辑实现插入数据的功能：

function handleSubmit() {
if (!google.gears.factory || !db) {
return;
}

var elm = document.getElementById('submitValue');
var phrase = elm.value;
// 注意 getTime() 方法返回的是日期对象相当于某个基准时间的毫秒数，是一个大整数
var currTime = new Date().getTime();

// 插入新记录
// Gears 数据库能自动转义/反转义插入的值。
// (The Gears database automatically escapes/unescapes inserted values.)
db.execute('insert into Demo values (?, ?)', [phrase, currTime]);

// Update the UI.
elm.value = '';
displayRecentPhrases();
}

关闭浏览器后，重新打开看这个页面，果然数据还在。可以将 Google 的这个 demo 页面代码复制到本地，
打开 html 离线执行，其功能是一样的。