HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

1,798 views
1,670 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,798
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

  1. 1. HTML5 offline Fallstricke für Web-Apps und Webseiten Ulrich Schmidt
  2. 2. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  3. 3. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  4. 4. Wo? - T-Mobile - UMTS http://www.t-mobile.de/netzabdeckung/ Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  5. 5. Wo? - T-Mobile - EDGE http://www.t-mobile.de/netzabdeckung/ Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  6. 6. 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
  7. 7. 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
  8. 8. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  9. 9. 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
  10. 10. 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
  11. 11. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  12. 12. Aktives Offline• localStorage• WebSQL• IndexedDB• FileStorage API
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. passives Offline e h tionCac Applica
  26. 26. 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
  27. 27. ApplicationCacheCACHE MANIFEST#version 1CACHE:/script.js/bild.pnghttp://example.com/css/styles.cssFALLBACK:/ /offline.htmlNETWORK:*Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  28. 28. 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
  29. 29. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur offline WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  30. 30. 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
  31. 31. 1. Schritt - Die WebAppStruktur index.htmlLayout style.cssLogik script.jsWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  32. 32. 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
  33. 33. 1. Schritt - Die WebApp - style.cssbody { background-color: #666; color: #fff;}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  34. 34. 1. Schritt - Die WebApp - script.jsfunction addNote() { /* Soll eine neue Notiz hinzufügen */}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  35. 35. 1. Schritt - Die WebApp - online ... ... ... ... ... ... Seite läd... Notiz + Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  36. 36. 1. Schritt - Die WebApp - offline ... ... ... Seite nicht Seite läd... gefunden. Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  37. 37. 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
  38. 38. 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
  39. 39. 2. Schritt - localStoragelocalStorage.setItem(key, JSON.stringify( { vara : a, varb : b } ));var item = JSON.parse( localStorage.getItem(key));Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  40. 40. 2. Schritt - localStorage ... ... ... ... ... ... Notiz + Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  41. 41. 2. Schritt - localStorage Seite nicht gefunden. Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  42. 42. 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
  43. 43. 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
  44. 44. 3. Schritt - ApplicationCache - ManifestCACHE MANIFEST/script.js/main.cssAchtung:Das einbindende Dokument wird immerautomatisch im Cache abgelegt.Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  45. 45. 3. Schritt - ApplicationCache - KommentarCACHE MANIFEST# Kommentar/script.js/main.cssWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  46. 46. 3. Schritt - ApplicationCache - FallbackCACHE MANIFEST/script.js/main.cssFALLBACK:/profile/ /noprofile.html/ /offline.htmlWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  47. 47. 3. Schritt - ApplicationCache - NetworkCACHE MANIFEST/script.js/main.cssFALLBACK:/ /offline.htmlNETWORK:*Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  48. 48. 3. Schritt - ApplicationCache ... ... ... ... ... ... Notiz + Notiz + Warum?© 2012 Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung
  49. 49. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zur WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  50. 50. MIME-TypeAddType text/cache-manifest .manifestWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  51. 51. BilderAssets Inhalte•  Logo •  Teaserbilder•  Designelemente •  Artikelbilder•  Sprites•  StylesheetWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. ApplicationCache - UpdateCACHE MANIFEST# version 1.1CACHE:/script.jsWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. Updates - manuelles Updateif (window.applicationCache) { applicationCache.addEventListener(updateready, function() { if (confirm(Aktualisiert! Neu laden?)) { window.location.reload(); } });}Warum? Konzepte Techniken Schritte Fallstricke Empfehlung
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zu einer WebApp5.  Fallstricke / Grenzen6.  EmpfehlungWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  69. 69. 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
  70. 70. 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
  71. 71. HTML5 offline1.  Warum?2.  Konzepte3.  Techniken4.  Schritte zu einer WebApp5.  Fallstricke / Grenzen6.  EmpfehlungenWarum? Konzepte Techniken Schritte Fallstricke Empfehlung
  72. 72. Fragen?
  73. 73. ENDE Bilder von flickr unter der Creative Commons

×