Menu
I'm playing with the incomplete example found at http://www.w3.org/TR/offline-webapps/
But I'm distressed to see comments in it like:
"renders the note somewhere", and
"report error", and
"// …"
So, will someone please help me write a valid example? Here's what I've got so far:
<!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>
I also know that I have to incorporate this in there somewhere:
if (navigator.onLine) {
// Send data using XMLHttpRequest
} else {
// Queue data locally to send later
}
But I'm not sure what even I would tie that too.
922
It looks to me like you are after something along the lines of
function save() {
if (navigator.onLine) {
// Send data using XMLHttpRequest
} else {
// Queue data locally to send later
}
}
<textarea name="mytext" onkeyup="save();"></textarea>
However, use a timeout like Robusto mentioned (which, I think, is also the way that GMail does things).
If its the "renders note somewhere", etc. that you are worried about, that part is for you to fill in. You will have to fill this in by selecting data out of the database, and then filling it into an element on your page.
function renderNote(row) {
$('notes').innerHtml = $('notes').innerHtml + row.body;
}
This is the best that I can work out from what the spec currently says - note, however, that the spec is currently incomplete and you won't be able to find a final version of it on the w3 site yet.
If you are curious as to how to queue up the data locally, even an array should do for this. Push each local request onto the end of the array (and presumably save it locally at the same time) and check periodically for an active internet connection. If the internet connection is available, repeatedly pop the top element off the array and send it over the net until the array is empty.
113
if navigator.online you could sync your local db with an online repository, you'd probably not need the 'else' as you're already storing locally. it might be better though to instead add eventlisteners (on the window object) for 'offline' and 'online' events and trigger (and cancel) syncing using those events.
check out example of online/offline state handling on this hacks.mozilla.org page and look at this ajaxian article about the webkit stickynotes html5-implementation (which does not sync when online though)
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
