9. Unterschiede zwischen Daten und Funktion
aktives Offline passives Offline
• Notiz • HTML
• Artikeltext • CSS
• Einstellungen • JavaScript
• Inhalte
Daten werden aktiv im Alle Frontend- und
Client gespeichert Logikdaten werden für
die Offlinenutzung im
Client gespeichert
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
14. localStorage
Was ist das?
• Persistenter Speicher für Text
• Wird als Alternative zu Cookies gesehen
Unterstützt von
• Allen gängigen Browsern
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
15. localStorage
var notes =
JSON.parse(localStorage.getItem("notes"));
var note = {
text : "Meine Notiz",
timestamp : 1234567890
}
notes.push(note);
localStorage.setItem("notes",JSON.stringify(notes));
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
16. localStorage
Pros Cons
• Support aller Browser • Langsam bei großen
• Einfach Datenmengen
• Schnelles Setup • Nicht durchsuchbar
• Text muss manuell
strukturierter werden
• Synchrone
Verarbeitung
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
17. WebSQL
Was ist das?
• deprecated
• strukturierte relationale Datenbank
Unterstützt von
• iOS seit 3.2
• Android seit 2.1
• Opera Mobile seit 11.0
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
19. WebSQL
Pros Cons
• Support von allen • Deprecated
gängigen Browsern • Relationales
• Asynchron Datenbank Knowhow
• Performance notwendig
• Struktur der Daten
• Einfache Migration
von bestehenden
Serverdatenbanken
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
20. IndexedDB
Was ist das?
• Konsequente Weiterentwicklung von
localStorage und WebSQL
• Objekte können direkt gespeichert werden
Unterstützt von
• Firefox ab 4.0, Chrome ab 11.0, IE
wahrscheinlich ab 10.0
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
21. IndexedDB
var note = {
text : "Meine Notiz",
timestamp : 1234567890
}
var openRequest = indexedDB.open("notes", "MyNotes");
openRequest.onsuccess = function(ev) {
db = ev.target.result;
var speicher = db.transaction(
[],IDBTransaction.READ_WRITE, 0
).objectStore("notes");
}
var request = speicher.put(note);
request.onsuccess = function(fx)
{console.log('saved');};
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
22. IndexedDB
Pros Cons
• Asynchron • Keine Unterstützung
• Objekte können ohne in mobilen Browsern
Vorbereitung • Kann komplex
gespeichert werden werden
• Durchsuchbar • Keine fixen
• Einfach benutzbar Datenstrukturen
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
23. FileSystem API
Was ist das?
• Speicher für Binärdateien
• Dateien werden im Dateisystem abgelegt
Unterstützt von
• Chrome seit 13 voll implementiert
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
24. FileSystem API
var note = {
text : "Meine Notiz",
timestamp : 1234567890
}
fs.root.getFile("notes/" + note.timestamp, {create:
true, exclusive: true}, function(file) {
file.createWriter(function(writer) {
writer.onerror = fileStore.onError;
var bb = new WebKitBlobBuilder;
bb.append(JSON.stringify(note));
writer.write(bb.getBlob("text/plain"));
handler();
}, fileStore.onError);
}, fileStore.onError);
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
25. FileSystem API
Pros Cons
• Speicher für große • Aktuell nur für den
Dateien Chrome verfügbar
• Asynchron • Nicht durchsuchbar
• Nicht für Objekte
geeignet
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
28. ApplicationCache
Was ist das?
• Speicher für Web-Ressourcen
• Webseiten können komplett offline
dargestellt werden
Unterstützt von
• Allen gängigen Browsern
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
30. ApplicationCache
Pros Cons
• Alle Dateien werden • Komplexes
herunter geladen Updateverhalten
• Schnelles Setup • Schwierig Online und
• Guter Browsersupport Offline zu kombinieren
• EventHandler um auf • Noch nicht in allen
Ereignisse reagieren zu Browsern strikt
können implementiert
• Für Webentwickler ein
seltsames Format
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
32. Schritte zur offline WebApp
1. Schritt - Layout und Struktur
Erstellen einer "normalen" WebApp
2. Schritt - localStorage
Implementierung der lokalen Datenhaltung
3. Schritt - ApplicationCache
Alle Daten und Assets lokal ablegen
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
33. 1. Schritt - Die WebApp
Struktur
index.html
Layout
style.css
Logik
script.js
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
36. 1. Schritt - Die WebApp - script.js
function addNote() {
/* Soll eine neue Notiz hinzufügen */
}
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
39. 2. Schritt - localStorage
Was ist das?
• Permanenter Speicher für Text
• Zugriff nur über die selbe "Domain"
• Mobil am weitesten verbreitet
• Einfach zu nutzen
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
40. 2. Schritt - localStorage
// liest ein Element aus dem Speicher
localStorage.getItem("key");
// schreibt ein Element in den Speicher
localStorage.setItem("key","value");
// löscht ein Element aus dem Speicher
localStorage.removeItem(“key“);
// löscht den gesamten Speicher
localStorage.clear();
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
44. 3. Schritt - ApplicationCache
Was ist das?
• Ein im Browser liegender permanenter
Cache.
• Ressourcen werden unter dem Namen
ihrer URL dort abgelegt.
• Ressourcen im ApplicationCache werden
nicht mehr vom Webserver abgerufen.
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
58. ApplicationCache - Update
• Änderungen von Dateien werden ignoriert
• Updates des ApplicationCache werden nur
geladen, wenn das CacheManifest
geändert wurde. Dabei ist der Inhalt
relevant.
• Caching-Header werden ignoriert
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
65. Updates - EventListener
ApplicationCache.addEventListener(handle,function,false)
cached: nach dem ersten Speichern eines CacheManifest
checking: Start des Ladens eines Manifests.
downloading: Start des Landes neuer Ressourcen.
error: 404 des Manifest oder geändertes Manifest während
des Downloads, Abbruch
noupdate: Update nicht erforderlich (keine Änderung)
obsolete: 404 -> Der ApplicationCache wird gelöscht
progress: Event für jede Ressource die geladen wird.
updateready: Letztes Event, wenn alle Ressourcen geladen
sind.
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
66. Bin ich offline?
if (navigator.onLine) {
// online
} else {
// offline
}
window.addEventListener('online', function(e) {
// aktiv online gehen
}, false);
window.addEventListener('offline', function(e) {
// aktiv offline gehen
}, false);
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
67. Weitere Fallstricke ApplicationCache
• Einbindene Seite wird immer gecached
• HTTP Cachingregeln greifen nicht
• Bei einem Fehler (404 oder Syntax) wird nichts
gecached
Richtige Syntax und Timing ist alles
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
71. Meine Empfehlung
• localStorage um Cookies zu vermeiden und
(kleine) Daten zu speichern
• ApplicationCache um das Laden von Seiten zu
beschleunigen oder mobile Seiten vollständig
offline zur Verfügung zu stellen.
• WebSQL mit Einschränkungen und wenn man
nur auf ein OS beschränkt ist.
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
72. FAZIT
• Durch diese HTML5 Feature lassen sich heute schon
Webseiten trotz Funklöchern beschleunigen.
• Offline erfordert ein eigenes Konzept.
• Es sollten nur "geringe" Datenmengen gespeichert
werden.
• Bis es einen schnell implementierbaren Standard für alle
Systeme gibt, wird noch einige Zeit vergehen.
• HTML5 ist „work in progress“
Warum? Konzepte Techniken Schritte Fallstricke Empfehlung