HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

HTML5 offline

Fallstricke für Web-Apps und Webseiten
Ulrich Schmidt

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

Warum? 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?

Wo? - Orte

•  Meeting •  Silvester
•  Restaurant •  Festival
•  Im Supermarkt •  Messen

•  In der U-Bahn/Zug •  Im Ausland
•  Auf dem Land •  Im Urlaub
•  Im Flugzeug

Warum?

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?

Unterschiede zwischen Daten und Funktion

aktives 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 gespeichert


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?

Aktives Offline

• localStorage
• WebSQL
• IndexedDB
• FileStorage API

localStorage

Was ist das?
•  Persistenter Speicher für Text
•  Wird als Alternative zu Cookies gesehen

Unterstützt von
•  Allen gängigen Browsern


localStorage
var notes =
JSON.parse(localStorage.getItem("notes"));

var note = {
text : "Meine Notiz",
timestamp : 1234567890
}

notes.push(note);

localStorage.setItem("notes",JSON.stringify(notes));


localStorage

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


WebSQL
Was ist das?
•  deprecated
•  strukturierte relationale Datenbank

Unterstützt von
•  iOS seit 3.2
•  Android seit 2.1
•  Opera Mobile seit 11.0


WebSQL
var note = {
}
db.transaction(function(tx) {
tx.executeSql(
"insert into notes " +
"(text, timestamp) values (?,?);",
[note.text, note.timestamp],
handler,
db.onError
);
});


WebSQL

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


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


IndexedDB
var note = {
}
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');};


IndexedDB

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


FileSystem API

Was ist das?
•  Speicher für Binärdateien
•  Dateien werden im Dateisystem abgelegt

Unterstützt von
•  Chrome seit 13 voll implementiert


FileSystem API
var note = {
}
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);


FileSystem API

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


passives Offline

e h
tionCac
Applica

ApplicationCache

Was ist das?
•  Speicher für Web-Ressourcen
•  Webseiten können komplett offline
dargestellt werden

Unterstützt von
•  Allen gängigen Browsern


ApplicationCache

CACHE MANIFEST
#version 1
CACHE:
/script.js
/bild.png
http://example.com/css/styles.css

FALLBACK:
/ /offline.html

NETWORK:
*


ApplicationCache

Pros 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 Format


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


1. Schritt - Die WebApp

Struktur
index.html

Layout
style.css

Logik
script.js

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>


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


1. Schritt - Die WebApp - script.js

function addNote() {
/* Soll eine neue Notiz hinzufügen */
}


1. Schritt - Die WebApp - online

... ...

... ...

... ...
Seite läd...
Notiz
+ Notiz

+

Warum?

1. Schritt - Die WebApp - offline

...

...

...
Seite nicht
Seite läd...
gefunden.
Notiz
+

Warum?


Was ist das?
•  Permanenter Speicher für Text
•  Zugriff nur über die selbe "Domain"
•  Mobil am weitesten verbreitet
•  Einfach zu nutzen


// 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();

localStorage.setItem('key',
JSON.stringify(
{
vara : 'a',
varb : 'b'
}
)
);
var item = JSON.parse(
localStorage.getItem('key')
);


... ...

... ...

... ...

Notiz
+ Notiz

+

Warum?


Seite nicht
gefunden.

Warum?


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.


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>


3. Schritt - ApplicationCache - Manifest
CACHE MANIFEST

/script.js
/main.css

Achtung:
Das einbindende Dokument wird immer
automatisch im Cache abgelegt.


3. Schritt - ApplicationCache - Kommentar
CACHE MANIFEST

# Kommentar

/script.js
/main.css


3. Schritt - ApplicationCache - Fallback
CACHE MANIFEST

/script.js
/main.css

FALLBACK:
/profile/ /noprofile.html
/ /offline.html


3. Schritt - ApplicationCache - Network
CACHE MANIFEST

/script.js
/main.css

FALLBACK:
/ /offline.html

NETWORK:
*


... ...

... ...

... ...

Notiz
+ Notiz

+

Warum?

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


MIME-Type

AddType text/cache-manifest .manifest


Bilder

Assets Inhalte
•  Logo •  Teaserbilder
•  Designelemente •  Artikelbilder
•  Sprites
•  Stylesheet


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


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


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


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


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


ApplicationCache - Update

CACHE MANIFEST

# version 1.1

CACHE:
/script.js


ApplicationCache - Update - Schritt 1

Laden der Seite

Seite im
ja AppCache? nein
Laden der Seite und Seite und Assets
Assets aus dem werden vom Server
ApplicationCache abgeholt

Laden des
CacheManifest

Warum?


Laden des
CacheManifest

Änderungen am
CacheManifest
nein
ja
Laden der Seite und Ende
Assets aus dem
ApplicationCache
Warum?


Laden des
CacheManifest Laden des
CacheManifest

Änderungen am
Änderungen am
CacheManifest
CacheManifest

ja nein
Laden der Seite und
Ende
Assets aus dem
ApplicationCache

Warum?

Updates - manuelles Update

if (window.applicationCache) {
applicationCache.addEventListener('updateready',
function() {
if (confirm('Aktualisiert! Neu laden?')) {
window.location.reload();
}
});
}


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?

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.


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


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


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?

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?

HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zu einer WebApp
6.  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.


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“


HTML5 offline
1.  Warum?
2.  Konzepte
3.  Techniken
4.  Schritte zu einer WebApp
6.  Empfehlungen


ENDE

Bilder von flickr unter der Creative Commons

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to HTML5 Offline - Fallstricke für mobile Webseiten und WebApps

Similar to HTML5 Offline - Fallstricke für mobile Webseiten und WebApps (20)

HTML5 Offline - Fallstricke für mobile Webseiten und WebApps