Google Gears 打造離線優先的高效能 Web 應用

前言：突破 Web 應用的效能與離線瓶頸

Ajax 已大幅提升 Web 應用回應速度，但雲端運算與 SaaS 使用者仍渴望更快體驗。隨著客戶端硬體效能提升，若能善用閒置運算資源，將進一步加速應用。此外，使用者期望離線也能使用 Web 應用，企業更關心核心資料是否掌握在自己手中。Google Gears 正是解決這些挑戰的關鍵工具——它提供離線支援、本地資料庫、背景運算等能力，讓 Web 應用邁向桌面級體驗。

Google Gears 核心架構

Google Gears 是開源瀏覽器外掛，支援 Firefox 1.5+、IE 6.0+、Safari 3.1.1+。它向瀏覽器新增功能並暴露 JavaScript API，主要模組包含：

• LocalServer API：快取 HTTP 資源到本地硬碟，提升回應速度並實現離線存取
• WorkerPool API：背景執行耗時運算，提升 UI 回應能力，可分擔伺服器運算負載
• Database API：本地 SQLite 資料庫，遵循同源策略保護敏感資料，支援離線資料同步
• Desktop API：建立桌面捷徑，像原生應用啟動 Web 應用
• Geolocation API：取得使用者地理位置，結合 Google Maps 顯示
• HttpRequest / Timer API：讓 Worker 也能發送 AJAX 請求與使用計時器

環境建置與第一步

1. 安裝 Gears 外掛：訪問 https://gears.google.com/ 點擊安裝
2. 下載 gears_init.js 放入專案
3. 在頁面引入：<script src="gears_init.js"></script>
4. 檢測是否安裝，未安裝導向安裝頁：

   if (!window.google || !google.gears) {
     location.href = "https://gears.google.com/?action=install&message=您的歡迎訊息";
   }

LocalServer API：離線快取核心

LocalServer 攔截網路請求，改用本地快取資源回應，實現離線存取與加速。提供兩種快取模式：

ManagedResourceStore 實作範例

// manifest.json
{
  "betaManifestVersion": 1,
  "version": "1.0",
  "entries": [
    { "url": "ManagedResourceStore.html" },
    { "url": "gears_init.js" }
  ]
}

// 主程式
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore("MyStore");
store.manifestUrl = "manifest.json";
store.enabled = true;
store.checkForUpdate(); // 手動觸發更新

// 輪詢檢查更新完成
var timer = setInterval(function() {
  if (store.currentVersion) {
    clearInterval(timer);
    alert('完成！目前版本：' + store.currentVersion);
  }
}, 500);

部署至 HTTP 伺服器後，點擊建立快取，即可離線存取。更新伺服器資源與 manifest 版本號，本地將自動同步。

WorkerPool API：背景平行運算

JavaScript 單執行緒特性導致大量運算阻塞 UI。WorkerPool 建立背景 Worker 平行處理，父頁面持續回應使用者操作。Worker 間不共享狀態，透過 sendMessage() 傳遞訊息通訊。

// 父頁面
var wp = google.gears.factory.create('beta.workerpool');
wp.onmessage = function(a, b, msg) { /* 處理子 Worker 回傳訊息 */ };
var childId = wp.createWorkerFromUrl('worker.js');
wp.sendMessage(["Hello", {gears: "Google Gears!"}], childId);

// worker.js
var wp = google.gears.workerPool;
wp.onmessage = function(a, b, msg) {
  var reply = "Child reply: " + msg.body[0] + msg.body[1].gears;
  wp.sendMessage(reply, msg.sender);
};

注意：子 Worker 無法存取 DOM、document、window，需透過父 Worker 代理；但可呼叫 JavaScript 內建函式與大部分 Gears API。

Database API：本地 SQLite 資料庫

解決離線資料儲存與同步問題。Gears 內建 SQLite，透過 Database API 在 JavaScript 執行 SQL。資料庫檔案儲存在使用者目錄，其他使用者無法存取。

var db = google.gears.factory.create('beta.database');
db.open('testdb'); // 不存在則建立

// 建立資料表與資料操作
db.execute('CREATE TABLE IF NOT EXISTS emp (empno INT, name TEXT, age INT, phone TEXT)');
db.execute('DELETE FROM emp');
db.execute('INSERT INTO emp VALUES (?, ?, ?, ?)', [111, 'Tony', 35, '1234567']);
db.execute('INSERT INTO emp VALUES (?, ?, ?, ?)', [122, '傅飛', 31, '2345678']); // 需 UTF-8 編碼儲存檔案

// 查詢與遍歷
var rs = db.execute('SELECT * FROM emp ORDER BY empno DESC');
while (rs.isValidRow()) {
  console.log(rs.field(0), rs.field(1), rs.field(2), rs.field(3));
  rs.next();
}
rs.close();

全文搜尋（FTS2 擴充）

建立虛擬表啟用全文檢索：CREATE VIRTUAL TABLE movie USING FTS2(name, director, stars)。查詢語法支援 AND/OR、前綴匹配、欄位限定、片語搜尋、排除詞等。

// 搜尋包含「周星馳」的記錄
var rs = db.execute('SELECT name, director, stars FROM movie WHERE movie MATCH ?', ['周星馳']);

// 進階查詢語法範例
movie MATCH '周星馳 OR 馮小剛'        // 任一詞
movie MATCH '國產 *'                 // 前綴匹配
movie MATCH 'stars:周星馳 國產 *'     // 欄位限定 + 全文
movie MATCH '"周星馳 元華"'           // 片語匹配
movie MATCH '"周星馳 -馮小剛"'        // 包含周星馳但排除馮小剛

資料同步策略

Gears 不提供同步 API，需自行實作：

• 顯式同步：使用者點擊按鈕觸發，簡單易測試，但大量資料同步耗時長、網路不穩時需手動重試
• 背景同步：WorkerPool 定期自動同步，對使用者透明、資料一致性高，但實作複雜、難測試、間隔不可太頻繁避免伺服器過載

其他實用 API

Desktop API：桌面捷徑

var desktop = google.gears.factory.create('beta.desktop');
desktop.createShortcut(
  'My Web App',
  'https://example.com/app.html',
  {'128x128':'icon128.png', '48x48':'icon48.png', '32x32':'icon32.png', '16x16':'icon16.png'},
  '應用程式描述'
);

執行後彈出確認對話框，可選擇建立桌面/開始選單/快速啟動捷徑。

Geolocation API：地理定位

var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(
  function(pos) { map.setCenter(new GLatLng(pos.latitude, pos.longitude), 13); },
  function(err) { alert('定位失敗：' + err.message); }
);

結合 Google Maps API 即時顯示使用者位置。

HttpRequest / Timer API：Worker 專用

Worker 無法存取瀏覽器原生 XMLHttpRequest、setTimeout/setInterval，Gears 提供相容 API 供 Worker 使用，功能與原生相同。

安全機制

• 同源策略：LocalServer 僅能快取同源 URL/manifest；Database 僅能開啟同源建立的資料庫
• 使用者授權：API 存取本地資源時彈出授權對話框，決定記住並可在瀏覽器設定中變更
• 資料隔離：本地資料儲存在當前使用者目錄，其他 OS 使用者無法存取
• 防止 SQL 注入：使用參數化查詢 db.execute('SELECT * FROM emp WHERE name=?', [user_input])，避免字串拼接

結語

Google Gears 提供豐富功能強化 Web 應用：離線快取、背景運算、本地資料庫、桌面整合、地理定位等。開發者應在現有專案中善用 Gears，或在新架構設計時納入考量，打造媲美桌面應用的 Web 體驗。