HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

HTML5 offline Fallstricke für Web-Apps und Webseiten Ulrich Schmidt

HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Wo? - Orte •  Meeting •  Silvester •  Restaurant •  Festival •  Im Supermarkt •  Messen •  In der U-Bahn/Zug •  Im Ausland •  Auf dem Land •  Im Urlaub •  Im Flugzeug Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

Definition "offline" "Als offline wird der Zustand bezeichnet, in dem ein Gerät, das über eine Kommunikationsschnittstelle verfügt, nicht bereit ist, Daten über diese Schnittstelle zu empfangen oder zu senden. Das Gegenteil davon ist online." (http://de.wikipedia.org/wiki/Offline 26.03.2011) Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

Unterschiede zwischen Daten und Funktionaktives 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 gespeichertWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Use-Cases Daten im Offline Site WebClient Client Einstellungen Client Client Client Daten Client Client Server Content Client Client Server Layout Server Client Client Logik Server Client Client Frontend Server Client Client Initiale Server Server Server Auslieferung Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

Aktives Offline• localStorage• WebSQL• IndexedDB• FileStorage API

localStorageWas ist das?•  Persistenter Speicher für Text•  Wird als Alternative zu Cookies gesehenUnterstützt von•  Allen gängigen BrowsernWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

localStoragevar 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

localStoragePros Cons•  Support aller Browser •  Langsam bei großen•  Einfach Datenmengen•  Schnelles Setup •  Nicht durchsuchbar •  Text muss manuell strukturierter werden •  Synchrone VerarbeitungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

WebSQLWas ist das?•  deprecated•  strukturierte relationale DatenbankUnterstützt von•  iOS seit 3.2•  Android seit 2.1•  Opera Mobile seit 11.0Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

WebSQLvar note = { text : "Meine Notiz", timestamp : 1234567890}db.transaction(function(tx) { tx.executeSql( "insert into notes " + "(text, timestamp) values (?,?);", [note.text, note.timestamp], handler, db.onError );});Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

WebSQLPros Cons•  Support von allen •  Deprecated gängigen Browsern •  Relationales•  Asynchron Datenbank Knowhow•  Performance notwendig•  Struktur der Daten•  Einfache Migration von bestehenden ServerdatenbankenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

IndexedDBWas ist das?•  Konsequente Weiterentwicklung von localStorage und WebSQL•  Objekte können direkt gespeichert werdenUnterstützt von•  Firefox ab 4.0, Chrome ab 11.0, IE wahrscheinlich ab 10.0Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

IndexedDBvar 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

IndexedDBPros Cons•  Asynchron •  Keine Unterstützung•  Objekte können ohne in mobilen Browsern Vorbereitung •  Kann komplex gespeichert werden werden•  Durchsuchbar •  Keine fixen•  Einfach benutzbar DatenstrukturenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

FileSystem APIWas ist das?•  Speicher für Binärdateien•  Dateien werden im Dateisystem abgelegtUnterstützt von•  Chrome seit 13 voll implementiertWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

FileSystem APIvar 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

FileSystem APIPros Cons•  Speicher für große •  Aktuell nur für den Dateien Chrome verfügbar•  Asynchron •  Nicht durchsuchbar •  Nicht für Objekte geeignetWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

passives Offline e h tionCac Applica

ApplicationCacheWas ist das?•  Speicher für Web-Ressourcen•  Webseiten können komplett offline dargestellt werdenUnterstützt von•  Allen gängigen BrowsernWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCacheCACHE MANIFEST#version 1CACHE:/script.js/bild.pnghttp://example.com/css/styles.cssFALLBACK:/ /offline.htmlNETWORK:*Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCachePros 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 FormatWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Schritte zur offline WebApp1. Schritt - Layout und Struktur Erstellen einer "normalen" WebApp2. Schritt - localStorage Implementierung der lokalen Datenhaltung3. Schritt - ApplicationCache Alle Daten und Assets lokal ablegenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

1. Schritt - Die WebAppStruktur index.htmlLayout style.cssLogik script.jsWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

1. Schritt - Die WebApp - index.html<!DOCTYPE HTML><html> <head> <link type="text/css" href="main.css"/> <script src="script.js"></script> </head> <body> ... </body></html>Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

1. Schritt - Die WebApp - style.cssbody { background-color: #666; color: #fff;}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

1. Schritt - Die WebApp - script.jsfunction addNote() { /* Soll eine neue Notiz hinzufügen */}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

2. Schritt - localStorageWas ist das?•  Permanenter Speicher für Text•  Zugriff nur über die selbe "Domain"•  Mobil am weitesten verbreitet•  Einfach zu nutzenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

2. Schritt - localStorage// liest ein Element aus dem SpeicherlocalStorage.getItem("key");// schreibt ein Element in den SpeicherlocalStorage.setItem("key","value");// löscht ein Element aus dem SpeicherlocalStorage.removeItem(“key“);// löscht den gesamten SpeicherlocalStorage.clear();Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

2. Schritt - localStoragelocalStorage.setItem(key, JSON.stringify( { vara : a, varb : b } ));var item = JSON.parse( localStorage.getItem(key));Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

3. Schritt - ApplicationCacheWas 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

3. Schritt - ApplicationCache - index.html<!DOCTYPE HTML><html mainfest="cache.manifest"> <head> <link type="text/css" href="main.css"/> <script src="script.js"></script> </head> <body> ... </body></html>Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

3. Schritt - ApplicationCache - ManifestCACHE MANIFEST/script.js/main.cssAchtung:Das einbindende Dokument wird immerautomatisch im Cache abgelegt.Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

3. Schritt - ApplicationCache - KommentarCACHE MANIFEST# Kommentar/script.js/main.cssWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

3. Schritt - ApplicationCache - FallbackCACHE MANIFEST/script.js/main.cssFALLBACK:/profile/ /noprofile.html/ /offline.htmlWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

3. Schritt - ApplicationCache - NetworkCACHE MANIFEST/script.js/main.cssFALLBACK:/ /offline.htmlNETWORK:*Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

MIME-TypeAddType text/cache-manifest .manifestWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

BilderAssets Inhalte•  Logo •  Teaserbilder•  Designelemente •  Artikelbilder•  Sprites•  StylesheetWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Bilder Asset-Bilder  ApplicationCache Content-Bilder  localStorage (Base64 encoded)var image = JSON.parse(localStorage.getItem(myImage));return <img src="data:image/+image.type+ ;base64,+image.data+"/>;Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

Bilder OImageRequest = function(_url) { this.xhr = new XMLHttpRequest(); var iid = md5(_url); //md5 or other id this.xhr.open(GET, _url, true); this.xhr.overrideMimeType(text/plain; charset=x-user-defined); // important this.xhr.onreadystatechange = function(e) { if (this.readyState==4&&this.status==200) { OImages.set(iid,jpeg,this.responseText); } } this.xhr.send(); }Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

Bilder OImages = { prefix : OImage, set : function(_id,_type,_data) { localStorage.setItem(this.prefix+_id, JSON.stringify( { id : _id, type : _type, data : Base64.encode(_data) })); }, get : function(_id) {... } }Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

Bilder OImages = { prefix : OImage, set : function(_id,_type,_data) {... }, get : function(_id) { var imageStr = localStorage.getItem(this.prefix+_id); var image = JSON.parse(imageStr); if(!image.type) { image.type = "png"; } return <img src="data:image/+image.type +;base64,+image.data+"/>; } }Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

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 ignoriertWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCache - UpdateCACHE MANIFEST# version 1.1CACHE:/script.jsWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCache - Update - Schritt 1 Laden der Seite Seite im ja AppCache? neinLaden der Seite und Seite und Assets Assets aus dem werden vom Server ApplicationCache abgeholt Laden des CacheManifest Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCache - Update - Schritt 2 Laden des CacheManifest Änderungen am CacheManifest nein ja Laden der Seite und Ende Assets aus dem ApplicationCache Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCache - Update - Schritt 3 Laden des CacheManifest Laden des CacheManifest Änderungen am Änderungen am CacheManifest CacheManifest ja nein Laden der Seite und Ende Assets aus dem ApplicationCache Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

Updates - manuelles Updateif (window.applicationCache) { applicationCache.addEventListener(updateready, function() { if (confirm(Aktualisiert! Neu laden?)) { window.location.reload(); } });}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung

ApplicationCache - Update - Gesamtbild Laden der Seite Seite im AppCache? ja nein Laden des Laden der Seite und Assets aus dem Seite und Assets CacheManifest ApplicationCache werden vom Server abgeholt Laden des Änderungen CacheManifest am Laden der Seite und CacheManife Assets aus dem st ApplicationCache ja Änderung ja nein en am Error CacheMa nifest Ende nein Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

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

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

Weitere Fallstricke ApplicationCache•  Einbindene Seite wird immer gecached•  HTTP Cachingregeln greifen nicht•  Bei einem Fehler (404 oder Syntax) wird nichts gecachedRichtige Syntax und Timing ist allesWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Browsersupport WebSQL iOS, Android (2+), BB (6+), MeeGo 1.2, WebOS IndexedDB Chrome (Android 4), FF (Android) FileSystem API Android (3+), Chrome, BB Playbook, localStorage Alle gängigen, außer Symbian und Windows Phone ApplicationCache Alle gängigen, außer Symbian und Windows Phone Mehr Infos unter http://mobilehtml5.org/ Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

Größenbeschränkungen (z.T. erweiterbar) WebSQL 5 MB IndexedDB 5 MB FileSystem API 5 MB localStorage 2,5 MB (iOS und Android) bzw. 5 MB ApplicationCache 5 MB Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zu einer WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

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

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

HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zu einer WebApp5.  Fallstricke / Grenzen6.  EmpfehlungenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung

Fragen?

ENDE Bilder von flickr unter der Creative Commons

http://eventifier.co	36
http://lanyrd.com	24

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

by Ulrich Schmidt on Jun 18, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 60

Statistics

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps Presentation Transcript