Post on 29-Nov-2014
description
transcript
28.10.11
Client-Side Storage mit HTML 5 Frühstücksvortrag
Tom Hombergs
2 Client-Side Storage mit HTML5 28.10.11
Inhalt
Setzen Sie hier das Thema ein, indem Sie im Menü unter Ansicht > Kopf- und Fußzeile den Eintrag der Fußzeile anpassen.
► Überblick HTML 5
► Motivation für Client-Side Storage
► HTML 5 Offline & Storage Features
► Fazit
3 Client-Side Storage mit HTML5 28.10.11
HTML auf der Zeitachse
HTML 1991 HTML2 1994 CSS + JS 1996 HTML
4 1997
CSS 2 1998 XHTML 2000 AJAX 2005 HTML5 2009
4 Client-Side Storage mit HTML5 28.10.11
HTML 5 – Featurecluster
Semantics
Offline & Storage
Device Access
Connectivity
Multimedia
Graphics & Effects
Performance & Integration
CSS 3
= HTML + CSS + Javascript
5 Client-Side Storage mit HTML5 28.10.11
Offline & Storage – Motivation
Warum will man Daten auf dem Client speichern? ► „Remember-Me“-Funktionalität
> Formulardaten, Anwendungszustand, Benutzer-Einstellungen ► Caching
> Server-Nutzdaten, Dateien (CSS, Javascript, Bilder) ► Offline-Modus
> Anwendung soll auch offline nutzbar sein
6 Client-Side Storage mit HTML5 28.10.11
Offline & Storage – Features
Web Storage ► sessionStorage: Speichern von Daten innerhalb einer Session ► localStorage: Speichern von Daten zwischen zwei Sessions
Database Storage ► Web SQL Database ► Indexed Database Application Cache ► Caching von Dateien
Netzwerkstatus ► Erkennung des Online-Status
7 Client-Side Storage mit HTML5 28.10.11
Web Storage – Übersicht
Server
Client-Session
Client-Session
Client-Session
Festplatte
Speichern von Informationen auf dem Client, anstatt sie vom Server zu laden
8 Client-Side Storage mit HTML5 28.10.11
Web Storage – Old School
Client-Side-Storage mit HTML 4: Cookies ► Werden mit jedem HTTP-Request mit an den Server übertragen ► Dadurch Beanspruchung der Bandbreite ► Sicherheitsrisiko: Cookies werden unverschlüsselt übertragen ► Maximal 4 KB an Daten
// Daten speichern document.cookie = “name=Max; expires=Fri, 3 Aug 2001
20:47:11 UTC; path=/” document.cookie = “age=25; expires=Fri, 3 Aug 2001
20:47:11 UTC; path=/” // der Wert von document.cookie ist dann: // “name=Max; age=25”
9 Client-Side Storage mit HTML5 28.10.11
Web Storage – „Cookies on Steroids“
Client-Side-Storage mit HTML 5: localStorage ► >= 5 MB Speicherplatz verfügbar ► Daten haben kein Ablaufdatum ► Daten werden nicht automatisch an Server übertragen ► Nur Zeichenketten können gespeichert werden ► Analog für Daten innerhalb einer Session: sessionStorage
// Daten speichern window.localStorage.setItem(„name“, „Max“); // Daten lesen var name = window.localStorage.getItem(“name”);
3.6+
8+
4+
10.5+
4+
10 Client-Side Storage mit HTML5 28.10.11
Database Storage – Web SQL Database
Web SQL Database ► Erzeugen und SQL-Tabellen und -anfragen in Javascript ► deprecated: Spec wird nicht weiterentwickelt
-
-
4+
-
-
this.db.transaction(function(tx) { tx.executeSql("create table …“, [], function() { console.log(„done"); } ); });
11 Client-Side Storage mit HTML5 28.10.11
Database Storage – IndexedDB
IndexedDB ► Speicherung von Key/Value-Paaren ► Suche nach Objekten mit bestimmten Mustern ► Asynchron
4+
-
11+
-
-
// Store erzeugen var store = db.createObjectStore("todo", {keyPath: "timeStamp"}); // Objekt im Store ablegen var request = store.put({
"text": todoText, "timeStamp" : new Date().getTime()
}); // Objekt aus Store laden var keyRange = IDBKeyRange.lowerBound(0); var cursorRequest = store.openCursor(keyRange); cursorRequest.onsuccess = function(e) {
… };
12 Client-Side Storage mit HTML5 28.10.11
Application Cache
Caching von Dateien ► Manifest definiert die zu cachenden Dateien ► Manifest-Datei wird einfach in HTML inkludiert
CACHE MANIFEST CACHE: myStyles.css myLibrary.js FALLBACK: lib.js fallback-lib.js #version 1.0
3.6+
-
5+
10.6+
4+
<!DOCTYPE html> <html manifest=„/myApp.manifest“> …
13 Client-Side Storage mit HTML5 28.10.11
Application Cache – Online-Status
Bin ich online? ► Mit navigator.onLine kann einfach geprüft werden,
ob der Browser im Offline-Modus ist ► Richtige Prüfung mit Hilfe des Manifests möglich
CACHE MANIFEST FALLBACK: online.js offline.js
// online.js var online = true;
// offline.js var online = false;
14 Client-Side Storage mit HTML5 28.10.11
Offline-Szenario
Im Online-Modus ► Daten an Server senden und vom Server abfragen ► Daten, die offline auch zur Verfügung stehen sollen in localStorage
speichern ► Bei neuer Manifest-Version: Dateien in den Cache laden
Im Offline-Modus ► Daten aus localStorage und Dateien aus dem Cache laden ► Daten, die eigentlich an den Server gehen sollen, in localStorage speichern ► In der nächsten Online-Sitzung localStorage-Inhalt mit Server
synchronisieren
Prominente Anwendung ► Google Mail Mobile
15 Client-Side Storage mit HTML5 28.10.11
Fazit zum Thema HTML5 / Offline & Storage
Browserkompatibilität ► Uneinheitliche Speichergröße von localStorage und sessionStorage ► Die gängigen Browser bieten Unterstützung für Entwickler an (Firebug & Co.) ► Wie üblich: nicht jeder Browser kann alles und einer kann am wenigsten Unterstützung ► Zahlreiche Javascript-Bibliotheken, insb. für mobile Anwendungen
Umdenken ► (Neuer) Skill erforderlich: Javascript ► Großes Potential für Nutzerfreundliche Anwendungen ► Umdenken von Serverlogik auf clientseitige Logik ► Appell an alle Web-Entwickler: über sinnvolle Einsatzmöglichkeiten für Offline-
Unterstützung nachdenken
16 Client-Side Storage mit HTML5 28.10.11
Links zum Thema HTML5
► http://www.w3.org/html/logo/ – HTML5 „Marketing“-Material
► html5rocks.com – Guter Startpunkt zum Thema HTML5
► beta.html5test.com – Browserkompatibilität testen
► http://www.modernizr.com/ – Javascript Framework rund um HTML5
► dev.w3.org/html5/webstorage/ - Spezifikation Web Storage API
► www.w3.org/TR/IndexedDB/ - Spezifikation IndexedDB API
Vielen Dank für Eure Aufmerksamkeit. mehr HTML5 am adesso Developer Day…
info@adesso.de / www.adesso.de
18 Client-Side Storage mit HTML5 28.10.11
Browser-Unterstützung
Browser-Rangliste nach http://beta.html5test.com/ ► Chrome 15: 343 Punkte ► Opera 11: 296 Punkte ► Firefox 7: 298 Punkte ► Safari 5: 253 Punkte ► Internet Explorer 9: 141 Punkte