HTML5 Storage

18
28.10.11 Client-Side Storage mit HTML 5 Frühstücksvortrag Tom Hombergs

description

Präsentation über HTML5 mit dem Fokus auf Offline Storage.

Transcript of HTML5 Storage

Page 1: HTML5 Storage

28.10.11

Client-Side Storage mit HTML 5 Frühstücksvortrag

Tom Hombergs

Page 2: HTML5 Storage

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

Page 3: HTML5 Storage

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

Page 4: HTML5 Storage

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

Page 5: HTML5 Storage

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

Page 6: HTML5 Storage

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

Page 7: HTML5 Storage

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

Page 8: HTML5 Storage

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”

Page 9: HTML5 Storage

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+

Page 10: HTML5 Storage

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

Page 11: HTML5 Storage

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) {

… };

Page 12: HTML5 Storage

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“> …

Page 13: HTML5 Storage

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;

Page 14: HTML5 Storage

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

Page 15: HTML5 Storage

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

Page 16: HTML5 Storage

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

Page 17: HTML5 Storage

Vielen Dank für Eure Aufmerksamkeit. mehr HTML5 am adesso Developer Day…

[email protected] / www.adesso.de

Page 18: HTML5 Storage

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