(注:本文前半部分翻译自W3C上的Offline Web Applications文档)
HTML 5包含了几个新特性,致力于解决构建能够离线运行的web应用程序。这些特性包括SQL、离线应用缓存API、在线/离线事件和状态,以及本地存储API。
1. 简介
典型的在线Web应用程序只能在有Internet连接的时候使用。没有网络时,人们不再能够检查他们的电子邮件、浏览他们的日程表,也不能用在线工具准备发言。原生应用程序则具有这些特性:e-mail客户端在本地存储邮件,日历应用在本地存储安排,演示软件在本地存储数据文件。
此外,离线时,用户完全依赖于HTTP缓存,因为他们不能连接到服务器获取最新的拷贝。
针对这个问题,HTML 5提供了两种解决方案:基于SQL的数据库API本地存储数据,和离线应用HTTP缓存来保证无法连接到网络时也能使用应用程序。
2. SQL
HTML 5的客户端SQL数据库可以实现结构化的数据存储,如e-mail应用程序可以用来本地存储邮件。数据库API是异步的,保证用户界面不会被锁定。因为数据库交互可能横跨多个浏览器窗口,所以数据库API也支持事务(Transaction)。
您可以使用Window对象的openDatabase()方法创建数据库对象,该方法带四个参数:数据库名、数据库版本、显示名称和一个估计的大小(以字节为单位)。比如:
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);
现在可以在该数据库上使用transaction()方法,transaction方法带1到3个参数:一个事务回调、一个出错时回调和一个成功时回调。transaction回调传人一个SQL事务对象,可以使用其executeSQL()方法。executeSQL()方法带1到4个参数:SQL语句、参数、SQL语句回调和SQL语句出错回调。SQL语句回调传出事务对象和SQL语句结果对象,可以用来获得数据行、最后插入的ID等等。
要完成记事本应用程序,需要添加如下代码:
function renderNote(row) { // renders the note somewhere } function reportError(source, message) { // report error } function renderNotes() { db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', []); tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { renderNote(rs.rows[i]); } }); }); } function insertNote(title, text) { db.transaction(function(tx) { tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ], function(tx, rs) { // … }, function(tx, error) { reportError('sql', error.message); }); }); }
3.离线应用缓存API
保证用户在没有联网的时候仍能使用Web应用程序的机制就是html元素的manifest属性。该属性包含一个清单(manifest)的URI,清单指定了哪些文件将缓存。清单有一个text/cache-manifest MIME类型。一个典型的清单文件如下:
CACHE MANIFEST index help style/default.css images/logo.png images/backgound.png NETWORK: server.cgi
该文件指定缓存若干文件,也指定了server.cgi不应该缓存,访问该文件将绕过缓存系统。
清单可以像如下在HTML中声明:
<!DOCTYPE HTML> <html manifest="cache-manifest"> ...
server.cgi文件列入白名单(放在NETWORK部分),因此可以连接服务器获取更新,如下:
<event-source src="server.cgi">
(event-source元素是HTML 5新引入的,允许服务器推送更新到Web页面。)