Question

我正在玩http://www.w3.org/TR/offline-webapps/

中找到的不完整示例

但我很难看到它的评论如下：

"renders the note somewhere", and
"report error", and
"// …"

那么，请有人帮我写一个有效的例子吗？这是我到目前为止所得到的：

<!DOCTYPE HTML>
<html manifest="cache-manifest">
<head>
<script>
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);

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);
      });
  });
}


</script>
<style>
label {
    display:block;
}
</style>
</head>
<body>
<form>
<label for="mytitle">Title:</label>
<input name="mytitle">
<label for="mytext">Text:</label>
<textarea name="mytext"></textarea>
<!-- There is no submit button because I want to save the info on every keystroke -->
</form>
</body>
</html>

我也知道我必须将其纳入某处：

if (navigator.onLine) {
   // Send data using XMLHttpRequest
} else {
   // Queue data locally to send later
}

但我不确定即使我也会这样做。

Answer 1

在我看来，你正在追求

的内容

function save() {
    if (navigator.onLine) {
       // Send data using XMLHttpRequest
    } else {
       // Queue data locally to send later
    }
}

<textarea name="mytext" onkeyup="save();"></textarea>

但是，请使用Robusto提到的超时（我认为，这也是GMail做事的方式）。

如果你担心的是“渲染某个地方”，等等，你可以填写这部分内容。你必须通过从数据库中选择数据，然后将其填入页面上的元素。

function renderNote(row) {
    $('notes').innerHtml = $('notes').innerHtml + row.body;
}

这是我可以根据规范目前所说的最好的方法 - 请注意，该规范目前尚未完成，您将无法在w3网站上找到它的最终版本。< / p>

如果您对如何在本地排队数据感到好奇，即使是数组也应该这样做。将每个本地请求推送到阵列的末尾（并且可能在同一时间将其保存在本地）并定期检查是否有活动的Internet连接。如果互联网连接可用，请反复弹出数组中的顶部元素并通过网络发送，直到阵列为空。

Answer 2

如果navigator.online可以将本地数据库与在线存储库同步，那么您可能不需要“其他”，因为您已经在本地存储。尽管为“离线”和“在线”事件添加eventlisteners（在窗口对象上）并使用这些事件触发（和取消）同步可能会更好。

查看在线/离线状态处理on this hacks.mozilla.org page的示例并查看this ajaxian article about the webkit stickynotes html5-implementation（虽然在线时不同步）

navigator.onLine

2 个答案: