HTML5離線網頁程式

点评:HTML5为浏览器变成应用程序的运行平台提供了坚实基础。现在不少浏览器实现了关键功能,比如客户端数据库、文件,支持2D、3D游戏运行。网络应用程序游走于网络和本地是完全可行的,这也符合中国国情(3G贵,wifi覆盖不足);另外,网络应用程序可以运行于任何支持HTML5的浏览器上,这完全简化了应用程序开发。是个不错的HTML5游戏,webkit引擎的浏览器都支持,所以xp上chrome和ipod上safi都运行的很好。相信未来支持HTML5的浏览器无处不在。

HTML5 離線網頁程式

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

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

Offline resources

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

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

Online and offline events

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

關於連線狀態之規格定義在 Browser state API 中,在 Firefox 3 中已可取得的。

Client-side Storage

關於儲存離線使用的客戶端資料,在不同的瀏覽器中有不同的作法。像是早期 Firefox 2 (與 IE8) 的、Microsoft’s userData、Flash storage、Google Gears Database 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 是 ,此 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 的 模組。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/11381.html