最近,追蹤了一些在 HTML5 draft 上的新規格,試著想跟上一些更動,一方面嘗試新 API 的用法。基於 HTML5 的強大功能,未來只用 HTML 與 Java Script 便可以實做出許多的網頁版本的應用軟體,在行動裝置如 iPhone, Palm webOS 上已經有許多軟體或小遊戲之實做。其中一項感興趣的功能是離線 Web Apps 的應用。這篇文章稍微紀錄一下相關的規格。

若想進一步瞭解 HTML5,可參考 Google 的 Brad Neuberg 的演講 Introduction to HTML 5Ian HicksonHTML 5: Features you want desperately but still can’t use 的展示。Ian Hickson 是 Web Applications 1.0/HTML 5 specification, CSS 2.1 的規格作者之一,也是 Acid2, Acid3 的維護者。

Offline resources

離線網頁的第一個問題,是必須使頁面中所使用的各項網頁、圖片先行快取於系統中。欲達到此目的,規格中定義了一個 manifest 宣告機制,你必須在此檔案中宣告所有欲快取之檔案列表。規格中亦定義了一組 Application Cache API,使你知悉目前快取狀態。

Offline resources 功能已經包含於Gecko 1.9.1/Firefox 3.5 中。

Online and offline events

若要作離線程式,第一個要判斷的可能還是網路連線狀態,雖說有時會是電腦依然接在網路上,但是卻連不上網路的狀態,但是若系統可以自行告知目前連線狀態,就可以省下不停確認連線狀態的白工。在 Debian GNU/Linux 上,若使用 NetworkManager,瀏覽器如 Iceweasel 會自動依照網路狀態切換狀態。

關於連線狀態之規格定義在 Browser state API 中,在 Firefox 3 中已可取得連線狀態改變通知

Client-side Storage

關於儲存離線使用的客戶端資料,在不同的瀏覽器中有不同的作法。像是早期 Firefox 2 (與 IE8) 的 globalStorage、Microsoft’s userData、Flash storage、Google GearsDatabase API 等等。原則上有兩種形式,一是 key-value 為主,另一種則是 SQL 語法導向,在 HTML 5  中有兩份規格,可以用來儲存離線使用的客戶端資料,一為 Web Storage、另一則為 Web Database

Web Storage 即為 key/value 形式的 API,在 Firefox 3.5 後已可使用相容於規格的 DOM Storage API. 而 Web Database 則提供給開發者利用 SQL (SQLite) 的語法直接管理資料庫,但除了特別需要搜尋功能外,我其實頗懷疑還有多少人願意用 JS 寫 SQL 語法。目前尚未見到 Firefox 實做 Web Database API,類似的 API 是 mozilla.org/storage/service,此 API 只能提供給 Firefox Extension 使用,尚無法直接應用於網頁中,網頁中必須透過 XPConnect取得權限才能使用。實際的作法可以參考 Klaus Förster 的 Offline SQLiteSVG database applications with Firefox 一文。

Other APIs

雖說目前已有較新的瀏覽器開始逐步支援 HTML 5 規格,但是基於跨平台的考量,目前最方便的 API Framework 應該暫時還是 Google Gears。這麼說得主要原因是因為其支援眾多平台,Firefox 1.5 之後、Safari 或者 IE6 以上皆可支援,甚至也支援一些 Windows Mobile 5 或 Android 平台,自然 Google 自己的 Chrome 瀏覽器也是內建支援的。跨平台支援,大約是網頁開發者最想避免的痛苦之一吧,在 HTML 5 普及前,若你願意使用 Database API 的 SQL 語法,Google Gears 可以減輕一些痛苦。另外 Google Gears 比 HTML 5 還好一點的特色是,Database API 讓開發者直接作全文搜尋,此乃利用 SQLite 的 fts2 模組。

或者,也可以利用一些 Java Script Library 來避開平台問題,讓 Library 自己選擇適當的儲存機制,像是早期的 Dojo Offline ToolkitPersistJS,或者我自己比較偏好使用的 jquery-jstore

新版的 Google Gears 0.5.21 (Released May 29, 2009),還支援 BlobCanvas。Blob 可以讓你在瀏覽器中存取一些二進位的檔案。Canvas 最大的用處大概是拿來縮圖,並另存檔案吧。0.5.21 中也增強了 Desktop API,Desktop API 除了最強大的製作捷徑 (createShortcut) 功能外,也新增了猜(圖片)檔案格式的 extractMetaData,跟可以處理檔案拖拉進瀏覽器處理的 getDragData。

目前的狀況,若想直接使用 Google Gears 同步網站資料,依然需要自己花費一些精力配合自己的伺服端 API 整合設計。一個需要考量的技術瓶頸是得避免同步抓取時,使網頁下載、解讀速度變慢,影響使用者的使用經驗。雖然這個問題可利用 WorkerPool 進行背景下載 (見 Google Gears 架構之  Background Sync),但依然必須攥構一快取與同步機制。

我更感興趣的是 Vladimir Vukićević 所提出的看法,他提議或許可用 CouchDB 來處理資料儲存的問題。而 Atul Varma 發表了他的新嘗試 BrowserCouch,用 Java Script 重作 CouchDB 的 API,目的是若上線狀態,可將資料存進「雲端」,而離線則可用本地快取。這種作法相當接近我期待中的系統架構。

  • 整理的真完整…

  • Fefewa

    真的! 感謝整理~