本文将简要介绍如何用 Google Gears 提供的 API 增强您的 Web 应用程序，包括增加离线支持，提高运行速度和本地数据库支持等。

众所周知，Ajax 可以使得 Web 应用程序的响应速度提高一大块，然而云计算和 SaaS(Software as a Service) 的用户仍然期望获得更快的响应速度，那 Web 应用程序还能更快吗？答案是肯定的。随着硬件技术的不断升级，客户端计算机的计算能力逐步提高，如果 Web 应用程序可以充分利用闲置的客户端计算能力，那将进一步提高其响应速度，但如何充分利用客户端计算能力便成了开发者新的挑战， Google Gears 正是帮助 Web 应用程序开发者应对这种挑战的有力工具。其次，用户有时希望在离线的情况下也可以使用 Web 应用程序，这无形当中增加了 Web 应用程序开发者的痛苦指数， Google Gears 恰好可以减轻开发者在这方面的痛苦。最后，企业用户对于采纳云计算和 SaaS 总会存在一种顾虑，那就是企业的核心数据拱手交给第三方公司来存储和管理，这显然使得企业难以保护自己公司的商业机密 , 而 Google Gear 可以允许用户将 Web 应用程序产生的用户数据存储到用户自己的电脑中，而不是将数据存储到云端或者 SaaS 提供商的数据中心。本文将逐个介绍 Google Gears 提供的各种特性和 API，并且会提供使用这些 API 的例子。

Google Gears 简介

Google Gears 是 Google 公司推出的一个开源项目，它是一个浏览器的插件，它会添加新的功能到浏览器，并暴露相应的 JavaScript API 给 Web 应用程序，以此增强 Web 应用程序的功能和性能。目前 Google Gears 支持 Firefox 1.5+, Internet Explorer 6.0+ 和 Safari 3.1.1+ 等主流浏览器。

首先， Google Gears 提供的 LocalServer API 可以将 Web 应用程序的 HTTP 资源缓存到用户的硬盘中，这样可以在 Ajax 的基础上进一步提高 Web 应用程序的响应速度，同时也使得用户在没有网络连接的情况下依然可以使用 Web 应用程序；其次， Google Gears 提供了 WorkerPool API 帮助 Web 应用程序在后台进行耗时的运算以提高 UI 的响应能力， Web 应用程序也可以用这种方式将原来由服务器承担的一部分运算工作交给客户端来处理；第三， Google Gears 提供的 Database API 则可以让 Web 应用程序将数据保存到用户的硬盘中并遵守同源安全策略，以此保护用户的敏感数据不被外露。除此之外， Google Gears 还提供了 Desktop, Geolocation 等 API 来丰富已有的功能。目前有 Google Docs, Google Reader 和 Zoho 等 Web 应用程序利用 Google Gears 来提供更多的功能。下面将介绍如何利用 Google Gears 提供的各种 API 来增强你的 Web 应用程序。

环境准备

为了开发 Google Gears 应用程序，你需要先安装 Google Gears 插件到你的浏览器，用你的浏览器访问 http://gears.google.com/，如果你的浏览器没有安装 Google Gears 插件，在显示的网页右上角会出现一个 Install Gears 的按钮，点击它将会开始安装 Google Gears。接下来你还需要到 http://code.google.com/intl/zh-CN/apis/gears/tools.html 下载 gears_init.js 文件，把该文件放到你的 Web 应用程序里面。由于 Google Gears 提供的 API 是基于 JavaScript 语言的，所以你不需要安装额外的 IDE 插件来开发 Google Gears 程序，仅需要普通的文本编辑器就可以。如果你的浏览器是 Firefox, 可以安装 Firebug 来调试 JavaScript。

走出第一步

为了使你的 Web 应用程序的某一个页面能用上 Google Gears 的功能，需要把清单 1 所示的代码嵌入到网页的 Html 代码里面 , src 的值是前面下载的 gears_init.js 的相对路径。

				 
<script type="text/javascript" src="gears_init.js"></script> 

检测是否安装了 Google Gears

只有在浏览器安装了 Google Gears 插件的情况下，Google Gears 提供的 JavaScript API 才会生效，所以你的 Web 应用程序需要在一开始就检测用户的浏览器是否安装了 Google Gears, 如果没有就转到 Google Gears 的安装页面。清单 2 所示代码能够帮你做到这些

				 
<script> 
  if (!window.google || !google.gears) { 
    location.href = 
    "http://gears.google.com/?action=install&message=<your welcome message>"; 
  } 
</script> 

在上面代码中你可以用 message 参数自定义显示在安装页面的消息。

使用 LocalServer API

虽然 Google Gears 不仅仅是为了给 Web 应用程序赋予离线功能而生，但离线功能却无疑是 Google Gears 最重要的使命之一。LocalServer, WorkerPool 和 Database 这三个 Gears 最早的，同时也是最核心的功能模块，为完成这一使命提供了必不可少的利器。

LocalServer 的主要功能是将 Web 应用程序的 HTTP 资源缓存到用户的本地硬盘中，并且当用户需要再次访问同样的网络资源的时候，对其进行拦截，转而用本地已存储的 HTTP 资源来代替服务器端的资源，为用户提供服务。这样，不但可以在 Ajax 的基础上进一步提高 Web 应用程序的响应速度，同时也使得用户在没有网络连接，或者网络连接状况不好的情况下依然可以像使用本地应用程序一样的流畅使用 Web 应用程序。

然而，即使有了 LocalServer 的支持，也并不意味着我们需要一股脑的把所有的 Web 应用程序都拿到本地来执行，很多实时性很强，或者数据量过大的 Web 应用程序，都并不适合进行本地存储和利用本地资源来提供服务。因此，在利用 LocalServer API 对 Web 应用程序提供离线使用的功能之前，更重要的是要根据不同应用程序的应用场景，考量和分析哪些 Web 应用程序，或者某个 Web 应用程序的哪些功能和资源适合放到本地，并且能相对容易放到本地，放到本地之后能有更好的使用效果和用户体验。

在确定了要存储 Web 应用程序的哪些功能和资源之后，我们可以利用 LocalServer 提供的两种缓存方式来获取 HTTP 资源：

• ResrouceStore – 获取指定 URL 的用户数据，PDF 文件，图片，样式表，JavaScript, 和 HTML 页面等。
• ManagedResourceStore – 根据 manifest 文件事先声明的内容，获取一系列版本可控的相关的网络资源。

与利用 ResourceStore 获取并存储相对独立的网络资源相比，利用 ManagedResourceStore 获取一系列相关联的网络资源会复杂一些。不过 manifest 文件的引入，也让由 ManageResourceStore 方式获取的网络资源变得相对的简单和一目了然。该 manifiest 文件由一个包括版本信息和资源清单在内的 JSON 对象组成，其中的“entries”属性，列出了所有需要被获取和存储的资源的 URL。

此外，以上两种存储方式最主要的区别是在于对所存资源的更新方式有所不同。ResourceStore 方式存储的资源不会自动被更新。如果需要更新，开发人员要在代码中显示地调用 captrure() 方法。而利用 ManagedResourceStore 存储的资源，由于在 manifest 文件中记录了版本的信息，因此可以同时支持手动和自动两种更新方式。开发人员既可以通过调用 checkForUpdate() 来手动检查并更新本地资源，也可以在 Google Gears 拦截或提供来自 ManagedResourceStore 的请求的同时，自动比较服务器和本地版本的差异，如有不同，注意这里是不同，也就是说即使服务器版本要低于本地版本，也会触发更新。

LocalServer API 提供了三个主要的类来创建和管理由 ResourceStore 和 ManagedResourceStore 两种方式获取的网络资源。

• LocalServer – 创建、打开和删除 ResourceStore 和 ManagedResourceStore 两种存储方式的网络资源。
• ManagedResourceStore – 管理以 ManagedResourceStore 方式存储的网络资源。
• ResourceStore – 管理以 ResourceStore 方式存储的网络资源。

在使用包括 LocalServer API 在内的 Google Gears 的 API 之前，首先需要利用 Factory API 中的 create() 方法，指定需要用到的接口。正如清单 3 所示的代码，在调用 LocalServer API 的方法之前，需要先调用 create() 方法创建出一个 LocalServer 类型的对象。

				 
<script type="text/javascript"> 
var localServer = google.gears.factory.create('beta.localserver'); 
</script> 

下面我们以将一个最简单的 HTML 页面用 ManagedResourceStore 方式存储到本地为例，来简单的说明 LocalServer API 是怎样将网络资源存储到本地，并且及时更新的。代码和 manifest 文件，分别如清单 4 和清单 5 所示。

				
<html> 
    <head> 
        <title>Google Gears ManagedResourceStore</title> 
        <script type="text/javascript" src="gears_init.js"></script> 
        <script> 
            var STORE_NAME = "MangedResourceStore_Sample"; 
            var MANIFEST_FILENAME = "manifest.json"; 
            var localServer; 
            var store; 
            
            function createManagedStore(){    
            	  // 创建出一个 LocalServer 类型的对象        
                localServer = google.gears.factory.create("beta.localserver"); 
            // 创建一个 ManagedResourceStore 类型的本地存储，如果该存储已经存在，就直接打开
                store = localServer.createManagedStore(STORE_NAME); 
                
                store.manifestUrl = MANIFEST_FILENAME; 
                store.enabled = true; 
                // 手动触发一次更新，该更新会在后台异步运行，用户可继续操作页面，无需等待响应
                store.checkForUpdate(); 
                
                var timerId = window.setInterval(function(){ 
                	 // 一旦获得本地存储的版本信息，表明本地存储或更新已经结束。
                    if (store.currentVersion) { 
                        window.clearInterval(timerId); 
                        alert('Done! Current Version is ' + 
                        store.currentVersion); 
                    } 
                }, 500); 
                
            } 
            
            function removeManagedStore(){ 
            	  // 删除已创建的本地存储
                localServer.removeManagedStore(STORE_NAME); 
            } 
        </script> 
    </head> 
    <body> 
        <h1>ManagedResourceStore - Version 0.01</h1> 
        <form> 
            <input type="button" value="Create Managed Store" 
                onclick="createManagedStore();"> 
            <input type="button" value="Remove Managed Store" 
                onclick="removeManagedStore();"> 
        </form> 
    </body> 
 </html>