• Save
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Upcoming SlideShare
Loading in...5
×
 

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

on

  • 1,583 views

 

Statistics

Views

Total Views
1,583
Views on SlideShare
1,519
Embed Views
64

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 64

http://eventifier.co 38
http://lanyrd.com 26

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  • Wo? - T-Mobile - UMTS http://www.t-mobile.de/netzabdeckung/ Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • Wo? - T-Mobile - EDGE http://www.t-mobile.de/netzabdeckung/ Warum?© 2012 Sevenval GmbH 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
  • HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? 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
  • HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? 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
  • HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? 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
  • 1. Schritt - Die WebApp - online ... ... ... ... ... ... Seite läd... Notiz + Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 1. Schritt - Die WebApp - offline ... ... ... Seite nicht Seite läd... gefunden. Notiz + Warum?© 2012 Sevenval GmbH 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
  • 2. Schritt - localStorage ... ... ... ... ... ... Notiz + Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  • 2. Schritt - localStorage Seite nicht gefunden. Warum?© 2012 Sevenval GmbH 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
  • 3. Schritt - ApplicationCache ... ... ... ... ... ... Notiz + Notiz + Warum?© 2012 Sevenval GmbH 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