HTML5 offline - Fallstricke von Web-Apps und Webseiten. Ulrich Schmidt (Sevenval GmbH)

Transkript

1 HTML5 offline - Fallstricke von Web-Apps und Webseiten Ulrich Schmidt (Sevenval GmbH)

2 HTML5 offline 1. Warum? 2. Konzepte 3. Techniken 4. Schritte zur offline WebApp 5. Fallstricke / Grenzen 6. Empfehlung

4 Wo? - T-Mobile - UMTS Sevenval GmbH

5 Wo? - T-Mobile - EDGE Sevenval GmbH

6 Wo? - Orte Meeting Restaurant Im Supermarkt Silvester Festival Messen In der U-Bahn/Zug Auf dem Land Im Flugzeug Im Ausland Im Urlaub 2012 Sevenval GmbH

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." ( ) 2012 Sevenval GmbH

9 Unterschiede zwischen Daten und Funktion aktives Offline Notiz Artikeltext Einstellungen Inhalte passives Offline HTML CSS JavaScript Daten werden aktiv im Client gespeichert Alle Frontend- und Logikdaten werden für die Offlinenutzung im Client gespeichert

10 Use-Cases Daten im Client Offline Site WebClient 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 Auslieferung Server Server Server 2012 Sevenval GmbH

12

13 Aktives Offline localstorage WebSQL IndexedDB FileStorage API

14 localstorage Was ist das? Persistenter Speicher für Text Wird als Alternative zu Cookies gesehen Unterstützt von Allen gängigen Browsern

15 localstorage var notes = JSON.parse(localStorage.getItem("notes")); var note = { text : "Meine Notiz", timestamp : } notes.push(note); localstorage.setitem("notes",json.stringify(notes));

16 localstorage Pros Support aller Browser Einfach Schnelles Setup Cons Langsam bei großen Datenmengen Nicht durchsuchbar Text muss manuell strukturierter werden Synchrone Verarbeitung

17 WebSQL Was ist das? deprecated strukturierte relationale Datenbank Unterstützt von ios seit 3.2 Android seit 2.1 Opera Mobile seit 11.0

18 WebSQL var note = { text : "Meine Notiz", timestamp : } db.transaction(function(tx) { ); }); tx.executesql( "insert into notes " + "(text, timestamp) values (?,?);", [note.text, note.timestamp], handler, db.onerror

19 WebSQL Pros Support von allen gängigen Browsern Asynchron Performance Struktur der Daten Einfache Migration von bestehenden Serverdatenbanken Cons Deprecated Relationales Datenbank Knowhow notwendig

20 IndexedDB Was ist das? Konsequente Weiterentwicklung von localstorage und WebSQL Objekte können direkt gespeichert werden Unterstützt von Firefox ab 4.0, Chrome ab 11.0, IE wahrscheinlich ab 10.0

21 IndexedDB var note = { } text : "Meine Notiz", timestamp : 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');};

22 IndexedDB Pros Asynchron Objekte können ohne Vorbereitung gespeichert werden Durchsuchbar Einfach benutzbar Cons Keine Unterstützung in mobilen Browsern Kann komplex werden Keine fixen Datenstrukturen

23 FileSystem API Was ist das? Speicher für Binärdateien Dateien werden im Dateisystem abgelegt Unterstützt von Chrome seit 13 voll implementiert

24 FileSystem API var note = { text : "Meine Notiz", timestamp : } 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);

25 FileSystem API Pros Speicher für große Dateien Asynchron Cons Aktuell nur für den Chrome verfügbar Nicht durchsuchbar Nicht für Objekte geeignet

26

27 passives Offline ApplicationCache

28 ApplicationCache Was ist das? Speicher für Web-Ressourcen Webseiten können komplett offline dargestellt werden Unterstützt von Allen gängigen Browsern

29 ApplicationCache CACHE MANIFEST #version 1 CACHE: /script.js /bild.png FALLBACK: / /offline.html NETWORK: *

30 ApplicationCache Pros Alle Dateien werden herunter geladen Schnelles Setup Guter Browsersupport EventHandler um auf Ereignisse reagieren zu können Cons Komplexes Updateverhalten Schwierig Online und Offline zu kombinieren Noch nicht in allen Browsern strikt implementiert Für Webentwickler ein seltsames Format

32 Schritte zur offline WebApp 1. Schritt - Layout und Struktur Erstellen einer "normalen" WebApp 2. Schritt - localstorage Implementierung der lokalen Datenhaltung 3. Schritt - ApplicationCache Alle Daten und Assets lokal ablegen

33 1. Schritt - Die WebApp Struktur index.html Layout style.css Logik script.js

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

35 1. Schritt - Die WebApp - style.css body { } background-color: #666; color: #fff;

36 1. Schritt - Die WebApp - script.js function addnote() { } /* Soll eine neue Notiz hinzufügen */

37 1. Schritt - Die WebApp - online Notiz... + Seite läd Notiz Sevenval GmbH

38 1. Schritt - Die WebApp - offline Notiz + Seite läd... Seite nicht gefunden Sevenval GmbH

39 2. Schritt - localstorage Was ist das? Permanenter Speicher für Text Zugriff nur über die selbe "Domain" Mobil am weitesten verbreitet Einfach zu nutzen

40 2. Schritt - localstorage // liest ein Element aus dem Speicher localstorage.getitem("key"); // schreibt ein Element in den Speicher localstorage.setitem("key","value"); // löscht ein Element aus dem Speicher localstorage.removeitem( key ); // löscht den gesamten Speicher localstorage.clear();

41 2. Schritt - localstorage localstorage.setitem('key', ); JSON.stringify( { ) } vara : 'a', varb : 'b' var item = JSON.parse( localstorage.getitem('key') );

42 2. Schritt - localstorage Notiz + Notiz Sevenval GmbH

43 2. Schritt - localstorage Seite nicht gefunden Sevenval GmbH

44 3. Schritt - ApplicationCache Was 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.

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

46 3. Schritt - ApplicationCache - Manifest CACHE MANIFEST /script.js /main.css Achtung: Das einbindende Dokument wird immer automatisch im Cache abgelegt.

47 3. Schritt - ApplicationCache - Kommentar CACHE MANIFEST # Kommentar /script.js /main.css

48 3. Schritt - ApplicationCache - Fallback CACHE MANIFEST /script.js /main.css FALLBACK: /profile/ /noprofile.html / /offline.html

49 3. Schritt - ApplicationCache - Network CACHE MANIFEST /script.js /main.css FALLBACK: / /offline.html NETWORK: *

50 3. Schritt - ApplicationCache Notiz + Notiz Sevenval GmbH

51 HTML5 offline 1. Warum? 2. Konzepte 3. Techniken 4. Schritte zur WebApp 5. Fallstricke / Grenzen 6. Empfehlung

52 MIME-Type AddType text/cache-manifest.manifest

53 Bilder Assets Logo Designelemente Sprites Stylesheet Inhalte Teaserbilder Artikelbilder

54 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+'"/>';

55 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(); }

56 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) {... }

57 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+'"/>'; } }

58 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 ignoriert

59 ApplicationCache - Update CACHE MANIFEST # version 1.1 CACHE: /script.js

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

61 ApplicationCache - Update - Schritt 2 Laden des CacheManifest Änderungen am CacheManifest ja Laden der Seite und Assets aus dem ApplicationCache nein Ende 2012 Sevenval GmbH

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

63 Updates - manuelles Update if (window.applicationcache) { } applicationcache.addeventlistener('updateready', }); function() { if (confirm('aktualisiert! Neu laden?')) { } window.location.reload();

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

65 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.

66 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);

67 Weitere Fallstricke ApplicationCache Einbindene Seite wird immer gecached HTTP Cachingregeln greifen nicht Bei einem Fehler (404 oder Syntax) wird nichts gecached Richtige Syntax und Timing ist alles

68 Browsersupport WebSQL ios, Android (2+), BB (6+), MeeGo 1.2, WebOS IndexedDB FileSystem API localstorage Chrome (Android 4), FF (Android) Android (3+), Chrome, BB Playbook, Alle gängigen, außer Symbian und Windows Phone ApplicationCache Alle gängigen, außer Symbian und Windows Phone Mehr Infos unter Warum? Sevenval GmbH Konzepte Techniken Schritte Fallstricke Empfehlung

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

70 HTML5 offline 1. Warum? 2. Konzepte 3. Techniken 4. Schritte zu einer WebApp 5. Fallstricke / Grenzen 6. Empfehlung

71 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.

72 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

73 HTML5 offline 1. Warum? 2. Konzepte 3. Techniken 4. Schritte zu einer WebApp 5. Fallstricke / Grenzen 6. Empfehlungen

74 Fragen?

75

76 ENDE Bilder von flickr unter der Creative Commons