2010-02-24 4 views
9

ich mit dem unvollständigen Beispiel bin spielen bei http://www.w3.org/TR/offline-webapps/navigator.onLine

gefunden Aber ich bin beunruhigt Kommentare in ihm sehen möchten:

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

So wird jemand bitte helfen Sie mir eine gültige schreiben Beispiel? Hier ist, was ich bisher habe:

<!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> 

Ich weiß auch, dass ich das dort irgendwo zu übernehmen haben:

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

Aber ich bin nicht sicher, was auch würde ich das auch binden.

+6

Ich würde bei jedem Tastendruck davon abraten in den DB zu speichern. Verwenden Sie setTimeout, um ein Speichern * n * Sekunden auszulösen, nachdem der Benutzer seine Eingabe angehalten hat. Andernfalls wird die Netzwerklatenz einen Albtraum machen. Ich selbst würde die Speicherung für jede Eingabe in einen Onblur-Handler legen. – Robusto

+0

Danke Robusto für den Kommentar. –

Antwort

10

Es sieht für mich wie Sie nach etwas entlang der Linien von

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

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

Verwenden Sie jedoch ein Timeout wie Robusto erwähnt (was ich denke, ist auch die Art und Weise, dass GMail Dinge tut).

Wenn es die "rendert irgendwo", etc., die Sie sich sorgen machen, ist dieser Teil für Sie ausfüllen. Sie müssen dies ausfüllen, indem Sie Daten aus der Datenbank auswählen und dann ausfüllen ein Element auf Ihrer Seite.

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

Das ist das Beste, was ich arbeite aus, was die Spezifikation zur Zeit sagt - beachten Sie jedoch, dass die Spezifikation noch nicht vollständig ist und Sie werden feststellen, die Lage sein, eine endgültige Version davon auf der w3 nicht Seite noch nicht.

Wenn Sie neugierig sind, wie Sie die Daten lokal in eine Warteschlange stellen, sollte dies auch ein Array tun. Drücken Sie jede lokale Anforderung auf das Ende des Arrays (und speichern Sie sie vermutlich lokal gleichzeitig) und überprüfen Sie regelmäßig eine aktive Internetverbindung. Wenn die Internetverbindung verfügbar ist, lassen Sie das oberste Element wiederholt vom Array los und senden Sie es über das Netz, bis das Array leer ist.

1

Wenn navigator.online Ihre lokale db mit einem Online-Repository synchronisieren könnte, würden Sie wahrscheinlich das "else" nicht benötigen, da Sie bereits lokal speichern. Es ist jedoch möglicherweise besser, EventListener (auf dem Fensterobjekt) für "Offline" - und "Online" -Ereignisse hinzuzufügen und die Synchronisierung mit diesen Ereignissen auszulösen (und abzubrechen).

Check-out Beispiel für Online-/Offline-Zustand on this hacks.mozilla.org page Handhabung und Blick auf this ajaxian article about the webkit stickynotes html5-implementation (die Synchronisierung nicht, wenn Online-though)

+0

Die hacks.mozilla-Seite zeigt nur die Manifestdatei an, nicht die vollständige SQL-Datenbank für den Offline-Speicher. –

+0

In der Tat verwendet es localstorage, um das lokale Datum anstelle von webdb (local sql db) zu speichern, wie es Firefox nicht tut und wahrscheinlich auch nie (siehe http://blog.futta.be/2009/11/18/chrome-opera- to-support-html5-webdb-ff-ie-wont /) unterstützt webdb. – futtta