SlideShare ist ein Scribd-Unternehmen logo

HTML5 Storage

adesso AG
adesso AG

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

1 von 18
Downloaden Sie, um offline zu lesen
Client-Side Storage mit HTML 5
Frühstücksvortrag


Tom Hombergs




28.10.11
Inhalt



       ►    Überblick HTML 5

       ►    Motivation für Client-Side Storage

       ►    HTML 5 Offline & Storage Features

       ►    Fazit




2 Client-Side Storage mit HTML5 28.10.11
HTML auf der Zeitachse




                                                         CSS +             HTML
1991    HTML              1994 HTML2             1996     JS        1997     4




                1998      CSS 2             2000 XHTML       2005   AJAX          2009 HTML5




 3 Client-Side Storage mit HTML5 28.10.11
HTML 5 – Featurecluster



                             = HTML + CSS + Javascript


                  Semantics                Multimedia


                  Offline & Storage        Graphics & Effects


                  Device Access            Performance & Integration


                  Connectivity             CSS 3



4 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




5 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




6 Client-Side Storage mit HTML5 28.10.11
Web Storage – Übersicht


                                             Server



       Client-                               Client-     Client-
      Session                               Session     Session




                                           Festplatte



                    Speichern von Informationen auf dem Client,
                          anstatt sie vom Server zu laden



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



8 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                            3.6+
►  Daten haben kein Ablaufdatum

►  Daten werden nicht automatisch an Server übertragen

►  Nur Zeichenketten können gespeichert werden                8+
►  Analog für Daten innerhalb einer Session: sessionStorage



                                                              4+
 // Daten speichern
 window.localStorage.setItem(„name“,
 „Max“);                                                      10.5+
 // Daten lesen
 var name =
 window.localStorage.getItem(“name”);                         4+



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



 this.db.transaction(function(tx)                          4+
   {
     tx.executeSql("create table …“,
     [], function()                                        -
        {
          console.log(„done");
        }
     );                                                    -
   });

10 Client-Side Storage mit HTML5 28.10.11
Database Storage – IndexedDB


IndexedDB
►  Speicherung von Key/Value-Paaren                   4+
►  Suche nach Objekten mit bestimmten Mustern

►  Asynchron

 // Store erzeugen                                    -
 var store = db.createObjectStore("todo", {keyPath:
 "timeStamp"});

 // Objekt im Store ablegen                           11+
 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) {
                                                      -
         …
 };

11 Client-Side Storage mit HTML5 28.10.11
Application Cache


Caching von Dateien
►  Manifest definiert die zu cachenden Dateien      3.6+
►  Manifest-Datei wird einfach in HTML inkludiert


 <!DOCTYPE html>                                    -
 <html manifest=„/myApp.manifest“>
 …

 CACHE MANIFEST                                     5+

 CACHE:
 myStyles.css
                                                    10.6+
 myLibrary.js

 FALLBACK:
 lib.js fallback-lib.js                             4+

 #version 1.0

12 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;



13 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




14 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

15 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



16 Client-Side Storage mit HTML5 28.10.11
Vielen Dank für Eure Aufmerksamkeit.
                      mehr HTML5 am adesso Developer Day…




info@adesso.de / www.adesso.de
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




18 Client-Side Storage mit HTML5 28.10.11

Recomendados

Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroidsBlogwerk AG
 
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...OPEN KNOWLEDGE GmbH
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Web Worker - Freelancing on the Web for Pinoys
Web Worker - Freelancing on the Web for PinoysWeb Worker - Freelancing on the Web for Pinoys
Web Worker - Freelancing on the Web for PinoysKevin Codamon
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedPeter Lubbers
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 

Más contenido relacionado

Ähnlich wie HTML5 Storage

Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondUlrich Krause
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als CacheDaniel Fisher
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch CachingAOE
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch CachingAOE
 
Auszug Seminarunterlagen "Tomcat 6.x"
Auszug Seminarunterlagen "Tomcat 6.x"Auszug Seminarunterlagen "Tomcat 6.x"
Auszug Seminarunterlagen "Tomcat 6.x"schellsoft
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeAlexander Merkel
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationThomas Siegers
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishSpeedPartner GmbH
 
HTML5 Local Storrage Solutions [German]
HTML5 Local Storrage Solutions [German]HTML5 Local Storrage Solutions [German]
HTML5 Local Storrage Solutions [German]Simon Jockers
 
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDomino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDNUG e.V.
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magentoAOE
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?adesso AG
 

Ähnlich wie HTML5 Storage (20)

Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Auszug Seminarunterlagen "Tomcat 6.x"
Auszug Seminarunterlagen "Tomcat 6.x"Auszug Seminarunterlagen "Tomcat 6.x"
Auszug Seminarunterlagen "Tomcat 6.x"
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 
HTML5 Local Storrage Solutions [German]
HTML5 Local Storrage Solutions [German]HTML5 Local Storrage Solutions [German]
HTML5 Local Storrage Solutions [German]
 
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDomino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
 
Node.js
Node.jsNode.js
Node.js
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
node.js Einführung
node.js Einführungnode.js Einführung
node.js Einführung
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 

Mehr von adesso AG

SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)adesso AG
 
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMPSNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMPadesso AG
 
Mythos High Performance Teams
Mythos High Performance TeamsMythos High Performance Teams
Mythos High Performance Teamsadesso AG
 
A Business-Critical SharePoint Solution From adesso AG
A Business-CriticalSharePoint SolutionFrom adesso AGA Business-CriticalSharePoint SolutionFrom adesso AG
A Business-Critical SharePoint Solution From adesso AGadesso AG
 
Was Sie über NoSQL Datenbanken wissen sollten!
Was Sie über NoSQL Datenbanken wissen sollten!Was Sie über NoSQL Datenbanken wissen sollten!
Was Sie über NoSQL Datenbanken wissen sollten!adesso AG
 
Continuous Delivery praktisch
Continuous Delivery praktischContinuous Delivery praktisch
Continuous Delivery praktischadesso AG
 
Agilität, Snapshots und Continuous Delivery
Agilität, Snapshots und Continuous DeliveryAgilität, Snapshots und Continuous Delivery
Agilität, Snapshots und Continuous Deliveryadesso AG
 
Getriebene Anwendungslandschaften
Getriebene AnwendungslandschaftenGetriebene Anwendungslandschaften
Getriebene Anwendungslandschaftenadesso AG
 
Google App Engine JAX PaaS Parade 2013
Google App Engine JAX PaaS Parade 2013Google App Engine JAX PaaS Parade 2013
Google App Engine JAX PaaS Parade 2013adesso AG
 
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)adesso AG
 
OOP 2013 NoSQL Suche
OOP 2013 NoSQL SucheOOP 2013 NoSQL Suche
OOP 2013 NoSQL Sucheadesso AG
 
NoSQL in der Cloud - Why?
NoSQL in der Cloud -  Why?NoSQL in der Cloud -  Why?
NoSQL in der Cloud - Why?adesso AG
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.adesso AG
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDIadesso AG
 
Zehn Hinweise für Architekten
Zehn Hinweise für ArchitektenZehn Hinweise für Architekten
Zehn Hinweise für Architektenadesso AG
 
Agile Praktiken
Agile PraktikenAgile Praktiken
Agile Praktikenadesso AG
 
Java und Cloud - nicht nur mit PaaS
Java und Cloud - nicht nur mit PaaS Java und Cloud - nicht nur mit PaaS
Java und Cloud - nicht nur mit PaaS adesso AG
 
Neue EBusiness Perspektiven durch HTML5
Neue EBusiness Perspektiven durch HTML5Neue EBusiness Perspektiven durch HTML5
Neue EBusiness Perspektiven durch HTML5adesso AG
 
CloudConf2011 Introduction to Google App Engine
CloudConf2011 Introduction to Google App EngineCloudConf2011 Introduction to Google App Engine
CloudConf2011 Introduction to Google App Engineadesso AG
 
Scala 4 Enterprise
Scala 4 EnterpriseScala 4 Enterprise
Scala 4 Enterpriseadesso AG
 

Mehr von adesso AG (20)

SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP (Kurzversion)
 
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMPSNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP
SNMP Applied - Sicheres Anwendungs-Monitoring mit SNMP
 
Mythos High Performance Teams
Mythos High Performance TeamsMythos High Performance Teams
Mythos High Performance Teams
 
A Business-Critical SharePoint Solution From adesso AG
A Business-CriticalSharePoint SolutionFrom adesso AGA Business-CriticalSharePoint SolutionFrom adesso AG
A Business-Critical SharePoint Solution From adesso AG
 
Was Sie über NoSQL Datenbanken wissen sollten!
Was Sie über NoSQL Datenbanken wissen sollten!Was Sie über NoSQL Datenbanken wissen sollten!
Was Sie über NoSQL Datenbanken wissen sollten!
 
Continuous Delivery praktisch
Continuous Delivery praktischContinuous Delivery praktisch
Continuous Delivery praktisch
 
Agilität, Snapshots und Continuous Delivery
Agilität, Snapshots und Continuous DeliveryAgilität, Snapshots und Continuous Delivery
Agilität, Snapshots und Continuous Delivery
 
Getriebene Anwendungslandschaften
Getriebene AnwendungslandschaftenGetriebene Anwendungslandschaften
Getriebene Anwendungslandschaften
 
Google App Engine JAX PaaS Parade 2013
Google App Engine JAX PaaS Parade 2013Google App Engine JAX PaaS Parade 2013
Google App Engine JAX PaaS Parade 2013
 
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)
Wartbare Web-Anwendungen mit Knockout.js und Model-View-ViewModel (MVVM)
 
OOP 2013 NoSQL Suche
OOP 2013 NoSQL SucheOOP 2013 NoSQL Suche
OOP 2013 NoSQL Suche
 
NoSQL in der Cloud - Why?
NoSQL in der Cloud -  Why?NoSQL in der Cloud -  Why?
NoSQL in der Cloud - Why?
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
Zehn Hinweise für Architekten
Zehn Hinweise für ArchitektenZehn Hinweise für Architekten
Zehn Hinweise für Architekten
 
Agile Praktiken
Agile PraktikenAgile Praktiken
Agile Praktiken
 
Java und Cloud - nicht nur mit PaaS
Java und Cloud - nicht nur mit PaaS Java und Cloud - nicht nur mit PaaS
Java und Cloud - nicht nur mit PaaS
 
Neue EBusiness Perspektiven durch HTML5
Neue EBusiness Perspektiven durch HTML5Neue EBusiness Perspektiven durch HTML5
Neue EBusiness Perspektiven durch HTML5
 
CloudConf2011 Introduction to Google App Engine
CloudConf2011 Introduction to Google App EngineCloudConf2011 Introduction to Google App Engine
CloudConf2011 Introduction to Google App Engine
 
Scala 4 Enterprise
Scala 4 EnterpriseScala 4 Enterprise
Scala 4 Enterprise
 

HTML5 Storage

  • 1. Client-Side Storage mit HTML 5 Frühstücksvortrag Tom Hombergs 28.10.11
  • 2. Inhalt ►  Überblick HTML 5 ►  Motivation für Client-Side Storage ►  HTML 5 Offline & Storage Features ►  Fazit 2 Client-Side Storage mit HTML5 28.10.11
  • 3. HTML auf der Zeitachse CSS + HTML 1991 HTML 1994 HTML2 1996 JS 1997 4 1998 CSS 2 2000 XHTML 2005 AJAX 2009 HTML5 3 Client-Side Storage mit HTML5 28.10.11
  • 4. HTML 5 – Featurecluster = HTML + CSS + Javascript Semantics Multimedia Offline & Storage Graphics & Effects Device Access Performance & Integration Connectivity CSS 3 4 Client-Side Storage mit HTML5 28.10.11
  • 5. 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 5 Client-Side Storage mit HTML5 28.10.11
  • 6. 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 6 Client-Side Storage mit HTML5 28.10.11
  • 7. Web Storage – Übersicht Server Client- Client- Client- Session Session Session Festplatte Speichern von Informationen auf dem Client, anstatt sie vom Server zu laden 7 Client-Side Storage mit HTML5 28.10.11
  • 8. 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” 8 Client-Side Storage mit HTML5 28.10.11
  • 9. Web Storage – „Cookies on Steroids“ Client-Side-Storage mit HTML 5: localStorage ►  >= 5 MB Speicherplatz verfügbar 3.6+ ►  Daten haben kein Ablaufdatum ►  Daten werden nicht automatisch an Server übertragen ►  Nur Zeichenketten können gespeichert werden 8+ ►  Analog für Daten innerhalb einer Session: sessionStorage 4+ // Daten speichern window.localStorage.setItem(„name“, „Max“); 10.5+ // Daten lesen var name = window.localStorage.getItem(“name”); 4+ 9 Client-Side Storage mit HTML5 28.10.11
  • 10. Database Storage – Web SQL Database Web SQL Database - ►  Erzeugen und SQL-Tabellen und -anfragen in Javascript ►  deprecated: Spec wird nicht weiterentwickelt - this.db.transaction(function(tx) 4+ { tx.executeSql("create table …“, [], function() - { console.log(„done"); } ); - }); 10 Client-Side Storage mit HTML5 28.10.11
  • 11. Database Storage – IndexedDB IndexedDB ►  Speicherung von Key/Value-Paaren 4+ ►  Suche nach Objekten mit bestimmten Mustern ►  Asynchron // Store erzeugen - var store = db.createObjectStore("todo", {keyPath: "timeStamp"}); // Objekt im Store ablegen 11+ 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) { - … }; 11 Client-Side Storage mit HTML5 28.10.11
  • 12. Application Cache Caching von Dateien ►  Manifest definiert die zu cachenden Dateien 3.6+ ►  Manifest-Datei wird einfach in HTML inkludiert <!DOCTYPE html> - <html manifest=„/myApp.manifest“> … CACHE MANIFEST 5+ CACHE: myStyles.css 10.6+ myLibrary.js FALLBACK: lib.js fallback-lib.js 4+ #version 1.0 12 Client-Side Storage mit HTML5 28.10.11
  • 13. 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; 13 Client-Side Storage mit HTML5 28.10.11
  • 14. 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 14 Client-Side Storage mit HTML5 28.10.11
  • 15. 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 15 Client-Side Storage mit HTML5 28.10.11
  • 16. 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 16 Client-Side Storage mit HTML5 28.10.11
  • 17. Vielen Dank für Eure Aufmerksamkeit. mehr HTML5 am adesso Developer Day… info@adesso.de / www.adesso.de
  • 18. 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 18 Client-Side Storage mit HTML5 28.10.11