离线存储

最近，追踪了一些在 HTML5 draft 上的新规格，试着想跟上一些更动，一方面尝试新 API 的用法。基于 HTML5 的强大功能，未来只用 HTML 与 Java Script 便可以实做出许多的网页版本的应用软件，在行动装置如 iPhone, Palm webOS 上已经有许多软件或小游戏之实做。其中一项感兴趣的功能是离线 Web Apps 的应用。这篇文章稍微纪录一下相关的规格。 若想进一步了解 HTML5，可参考 Google 的 Brad Neuberg 的演讲 Introduction to HTML 5 或 Ian Hickson 的 HTML 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 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 是 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 Toolkit、PersistJS，或者我自己比较偏好使用的 jquery-jstore。 新版的 Google Gears 0.5.21 (Released May 29, 2009)，还支援 Blob 与 Canvas。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，目的是若上线状态，可将数据存进「云端」，而离线则可用本地快取。这种作法相当接近我期待中的系统架构。