+ All Categories
Home > Technology > Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen - dwx13

Date post: 13-Jan-2015
Category:
Upload: stephan-hochdoerfer
View: 749 times
Download: 1 times
Share this document with a friend
Description:
 
103
Offline Strategien für HTML5 Web Applikationen Stephan Hochdörfer, bitExpert AG
Transcript
Page 1: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Stephan Hochdörfer, bitExpert AG

Page 2: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Über mich

Stephan Hochdörfer

Head of IT der bitExpert AG, Mannheim

PHP`ler seit 1999

[email protected]

@shochdoerfer

Page 3: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Daten auf dem Client speichern?

Page 4: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Wie wurde dies in der Vergangenheit gelöst?

Page 5: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Cookies. Lecker aber mehr auch nicht.

Page 6: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

IE DHTML behaviours

Page 7: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Flash Cookies schmecken auch lecker.

Page 8: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Google Gears mit neuem Ansatz.

Page 9: Offline Strategien für HTML5 Web Applikationen - dwx13

Gibt es nichts wirklich sinnvolles?

Offline Strategien für HTML5 Web Applikationen

Page 10: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

als Ausweg...

Page 11: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

[...] we take the next step, announcing 2014 as the target for

Recommendation.Jeff Jaffe, Chief Executive Officer, World Wide Web Consortium

Page 12: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Page 13: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Page 14: Offline Strategien für HTML5 Web Applikationen - dwx13

Was bedeutet „offline“?

Offline Strategien für HTML5 Web Applikationen

Page 15: Offline Strategien für HTML5 Web Applikationen - dwx13

Was bedeutet „offline“?

Offline Strategien für HTML5 Web Applikationen

Applikation vs. Content

Page 16: Offline Strategien für HTML5 Web Applikationen - dwx13

Was bedeutet „offline“?

Offline Strategien für HTML5 Web Applikationen

Application Cache vs. Offline Storage

Page 17: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache für statische Ressourcen

Offline Strategien für HTML5 Web Applikationen

<!DOCTYPE html><html lang="en">

HTML Page:

Page 18: Offline Strategien für HTML5 Web Applikationen - dwx13

<!DOCTYPE html><html lang="en" manifest="cache.manifest">

App Cache für statische Ressourcen

Offline Strategien für HTML5 Web Applikationen

HTML Page:

cache.manifest (Content-Type: text/cache-manifest):

CACHE MANIFEST

js/app.jscss/app.cssfavicon.icohttp://someotherdomain.com/image.png

Page 19: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache für statische Ressourcen

Offline Strategien für HTML5 Web Applikationen

CACHE MANIFEST# 2012-09-16

NETWORK:data.php

CACHE:/main/home/main/app.js/settings/home/settings/app.jshttp://myhost/logo.pnghttp://myhost/check.pnghttp://myhost/cross.png

Page 20: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache für statische Ressourcen

Offline Strategien für HTML5 Web Applikationen

CACHE MANIFEST# 2012-09-16

FALLBACK:/ /offline.html

NETWORK:*

Page 21: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache Scripting

Offline Strategien für HTML5 Web Applikationen

// events fired by window.applicationCachewindow.applicationCache.onchecking = function(e) {log("Checking for updates");}window.applicationCache.onnoupdate = function(e) {log("No updates");}window.applicationCache.onupdateready = function(e) {log("Update ready");}window.applicationCache.onobsolete = function(e) {log("Obsolete");}window.applicationCache.ondownloading = function(e) {log("Downloading");}window.applicationCache.oncached = function(e) {log("Cached");}window.applicationCache.onerror = function(e) {log("Error");}

// Log each filewindow.applicationCache.onprogress = function(e) { log("Progress: downloaded file " + counter); counter++;};

Page 22: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache Scripting

Offline Strategien für HTML5 Web Applikationen

// Check if a new cache is available on page load.window.addEventListener('load', function(e) { window.applicationCache.addEventListener('updateready', function(e) {

if(window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Browser downloaded a new app cache. // Swap it in and reload the page window.applicationCache.swapCache(); if (confirm('New version is available. Load it?)) { window.location.reload(); } } else { // Manifest didn't change... } }, false);

}, false);

Page 23: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

Page 24: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

1. Dateien werden immer(!) vom lokalen Cache ausgeliefert.

Page 25: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

2. Der lokale Cache wird nur dann aktualisiert wenn sich die manifest

Datei geändert hat.

Page 26: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

3. Nicht ladbare Dateien aus der CACHE Sektion führen dazu dass der

Cache invalide ist.

Page 27: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

4. Kann die manifest Datei nicht geladen werden, erfolgt kein Caching!

Page 28: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

5. Nicht gecachte Ressourcen werden auf einer gecachten Seite nicht

angezeigt.

Page 29: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

6. Nach Aktualisierung des Caches muss die Seite neu geladen werden!

Page 30: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Einige Fallstricke!

Offline Strategien für HTML5 Web Applikationen

7. Mit expires Header arbeiten um das Cachen des manifests zu verhinden!

Page 31: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Was darf gecacht werden?

Offline Strategien für HTML5 Web Applikationen

Ja: Schriften Startbild Applikationsicon Einstiegsseite Fallbackseite

Nein: CSS HTML Javascript

Page 32: Offline Strategien für HTML5 Web Applikationen - dwx13

App Cache – Was darf gecacht werden?

Offline Strategien für HTML5 Web Applikationen

Den App Cache nur für „statischen Content“ verwenden!

Page 33: Offline Strategien für HTML5 Web Applikationen - dwx13

Data URI Schema

Offline Strategien für HTML5 Web Applikationen

Page 34: Offline Strategien für HTML5 Web Applikationen - dwx13

<!DOCTYPE HTML><html> <head>  <title>The Data URI scheme</title>  <style type="text/css">  ul.checklist li {    margin­left: 20px;    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==') no­repeat scroll left top;}  </style> </head> <body>  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> </body></html>

Data URI Schema

Offline Strategien für HTML5 Web Applikationen

Page 35: Offline Strategien für HTML5 Web Applikationen - dwx13

Dynamische Daten lokal speichern...

Offline Strategien für HTML5 Web Applikationen

Page 36: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Beispiel: Todoliste

Page 37: Offline Strategien für HTML5 Web Applikationen - dwx13

Dynamische Daten lokal speichern...

Offline Strategien für HTML5 Web Applikationen

Sourcen:github.com/bitExpert/html5-offline

Page 38: Offline Strategien für HTML5 Web Applikationen - dwx13

Dynamische Daten lokal speichern...

Offline Strategien für HTML5 Web Applikationen

Web Storage, Web SQL Database, IndexedDB, File API

Page 39: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage

Offline Strategien für HTML5 Web Applikationen

Page 40: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage

Offline Strategien für HTML5 Web Applikationen

Komfortable Art Daten offline zu speichern: Key/Value Speicher

Page 41: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: 2 Möglichkeiten

Offline Strategien für HTML5 Web Applikationen

localStorage vs. sessionStorage

Page 42: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Datensatz hinzufügen

Offline Strategien für HTML5 Web Applikationen

function add(item) {try {

// for a new item set idif((typeof item.id === "undefined")

|| (null == item.id) || ("" == item.id)) {item.id = get_lastIndex() + 1;

}

// store object as stringlocalStorage.setItem(item.id,

JSON.stringify(item) );

// update the indexset_lastIndex(item.id);

}catch(ex) {

console.log(ex);}

}

Page 43: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Datensatz ändern

Offline Strategien für HTML5 Web Applikationen

function modify(item) {try {

// store object as stringlocalStorage.setItem(item.id,

JSON.stringify(item) );

}catch(ex) {

console.log(ex);}

}

Page 44: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Datensatz löschen

Offline Strategien für HTML5 Web Applikationen

function remove (id) {try {

localStorage.removeItem(id);}catch(ex) {

console.log(ex);}

}

Page 45: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Datensätze auslesen

Offline Strategien für HTML5 Web Applikationen

function read() { try {

var lastIdx = get_lastIndex(); for(var i = 1; i <= lastIdx; i++) {

if(null !== localStorage.getItem(i)) { // parse and render item var item = JSON.parse(

localStorage.getItem(i) );

} }

} catch(ex) {

console.log(ex); }}

Page 46: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Wie sessionStorage nutzen?

Offline Strategien für HTML5 Web Applikationen

Page 47: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Wie sessionStorage nutzen?

Offline Strategien für HTML5 Web Applikationen

Ersetze „localStorage“durch „sessionStorage“

Page 48: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Datensatz hinzufügen

Offline Strategien für HTML5 Web Applikationen

function add(item) {try {

// for a new item set idif((typeof item.id === "undefined")

|| (null == item.id) || ("" == item.id)) {item.id = get_lastIndex() + 1;

}

// store object as stringsessionStorage.setItem(item.id,

JSON.stringify(item) );

// update the indexset_lastIndex(item.id);

}catch(ex) {

console.log(ex);}

}

Page 49: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Alternative Zugriffsmöglichkeiten

Offline Strategien für HTML5 Web Applikationen

var value = "my value";

// method calllocalStorage.setItem("key", value);

// Array accessorlocalStorage[key] = value;

// Property accessorlocalStorage.key = value;

Page 50: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Welche Daten sind gespeichert?

Page 51: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Vorteile

Offline Strategien für HTML5 Web Applikationen

Die meisten der aktuellen Browser „können“ Web Storage.

Page 52: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Nachteile

Offline Strategien für HTML5 Web Applikationen

Daten werden unstrukturiert gespeichert.

Page 53: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Nachteile

Offline Strategien für HTML5 Web Applikationen

Nicht Transaktionsfähig!

Page 54: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Nachteile

Offline Strategien für HTML5 Web Applikationen

Daten können nicht automatisch verfallen. Manueller Aufwand nötig.

Page 55: Offline Strategien für HTML5 Web Applikationen - dwx13

Web Storage: Nachteile

Offline Strategien für HTML5 Web Applikationen

Unzureichende Informationen wie voll der lokale Cache wirklich ist.

Page 56: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database

Offline Strategien für HTML5 Web Applikationen

Page 57: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database

Offline Strategien für HTML5 Web Applikationen

Eine lokale SQL Datenbank auf SQLite Basis.

Page 58: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Callbacks

Offline Strategien für HTML5 Web Applikationen

var onError = function(tx, ex) {alert("Error: " + ex.message);

};

var onSuccess = function(tx, results) {var len = results.rows.length;

for(var i = 0; i < len; i++) {// render found todo itemrender(results.rows.item(i));

}};

Page 59: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Datenbank erzeugen

Offline Strategien für HTML5 Web Applikationen

// initalize the database connectionvar db = openDatabase('todo', '1.0', 'Todo Database', 5 * 1024 * 1024 );

db.transaction(function (tx) {tx.executeSql(

'CREATE TABLE IF NOT EXISTS todo '+ '(id INTEGER PRIMARY KEY ASC, todo TEXT)',

[], onSuccess, onError

);});

Page 60: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Datensatz hinzufügen

Offline Strategien für HTML5 Web Applikationen

function add(item) {db.transaction(function(tx) {

tx.executeSql('INSERT INTO todo (todo) VALUES (?)',[

item.todo],onSuccess,onError

);});

}

Page 61: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Datensatz verändern

Offline Strategien für HTML5 Web Applikationen

function modify(item) {db.transaction(function(tx) {

tx.executeSql('UPDATE todo SET todo = ? WHERE id = ?',[

item.todoitem.id

],onSuccess,onError

);});

}

Page 62: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Datensatz löschen

Offline Strategien für HTML5 Web Applikationen

function remove(id) {db.transaction(function (tx) {

tx.executeSql('DELETE FROM todo WHERE id = ?',[

id],onSuccess,onError

);});

}

Page 63: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Datensätze auslesen

Offline Strategien für HTML5 Web Applikationen

function read() {db.transaction(function (tx) {

tx.executeSql('SELECT * FROM todo',[],onSuccess,onError

);});

}

Page 64: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Vorteile

Offline Strategien für HTML5 Web Applikationen

Eine SQL Datenbank im Browser!

Page 65: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Nachteile

Offline Strategien für HTML5 Web Applikationen

Eine SQL Datenbank im Browser!

Page 66: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Nachteile

Offline Strategien für HTML5 Web Applikationen

SQLite kann seeeehr langsam sein!

Page 67: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database: Nachteile

Offline Strategien für HTML5 Web Applikationen

Nicht länger Teil der HTML5 Spezifikation!

Page 68: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB

Offline Strategien für HTML5 Web Applikationen

Page 69: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB

Offline Strategien für HTML5 Web Applikationen

Kompromiss aus Web Storage und Web SQL Database.

Page 70: Offline Strategien für HTML5 Web Applikationen - dwx13

Web SQL Database vs. IndexedDB

Offline Strategien für HTML5 Web Applikationen

Kategorie Web SQL IndexedDB

Speicherart Tabellen mit Spalten und Zeilen

Objectstore mit Javascript Objekten und Keys

Abfragemechanismus

SQL Cursor APIs, Key Range APIs und Applicationslogik

Transaktionalität

Lock für Databanken, Tabellen oder Zeilen bei READ_WRITE Transaktionen

Locks für Datenbanken (VERSION_CHANGE Transaktion) und Objectstores (READ_ONLY, READ_WRITE Transaktion).

Transaktions- Commits

Transaktionen werden explizt erzeugt. Standard: Rollback, außer es wird explizit ein commit ausgeführt.

Transaktionen werden explizt erzeugt. Standard: Committen sofern kein Fehler aufgetreten ist.

Page 71: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Vorarbeiten

Offline Strategien für HTML5 Web Applikationen

// different browsers, different naming conventionsvar indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

Page 72: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Objektspeicher erzeugen

Offline Strategien für HTML5 Web Applikationen

var db = null;var request = indexedDB.open("todo");request.onfailure = onError;request.onsuccess = function(e) {

db = request.result;var v = "1.0";if(v != db.version) {

var verRequest = db.setVersion(v);verRequest.onfailure = onError;verRequest.onsuccess = function(e) {

var store = db.createObjectStore("todo",{

keyPath: "id",autoIncrement: true

});e.target.transaction.oncomplete =

function() {};};

}};

Page 73: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Datensatz hinzufügen

Offline Strategien für HTML5 Web Applikationen

function add(item) {try {

var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);

var store = trans.objectStore("todo");var request = store.put({

"todo": item.todo,});

}catch(ex) {

onError(ex);}

}

Page 74: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Datensatz verändern

Offline Strategien für HTML5 Web Applikationen

function modify(item) {try {

var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);

var store = trans.objectStore("todo");var request = store.put(item);

}catch(ex) {

onError(ex);}

}

Page 75: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Datensatz löschen

Offline Strategien für HTML5 Web Applikationen

function remove(id) {try {

var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);

var store = trans.objectStore("todo");var request = store.delete(id);

}catch(ex) {

onError(ex);}

}

Page 76: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Datensätze auslesen

Offline Strategien für HTML5 Web Applikationen

function read () {try {

var trans = db.transaction(["todo"], IDBTransaction.READ);

var store = trans.objectStore("todo");var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest = store.openCursor(keyRange);

cursorRequest.onsuccess = function(e) {var result = e.target.result;if(!!result == false) {

return;}// @TODO: render result.valueresult.continue();

};}catch(ex) {

onError(ex);}

}

Page 77: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Vorteile

Offline Strategien für HTML5 Web Applikationen

Neuer Standard der künftig durch viele Browser unterstützt wird.

Page 78: Offline Strategien für HTML5 Web Applikationen - dwx13

IndexedDB: Nachteile

Offline Strategien für HTML5 Web Applikationen

Nur ein Index pro Objektspeicher möglich.

Page 79: Offline Strategien für HTML5 Web Applikationen - dwx13

File API

Offline Strategien für HTML5 Web Applikationen

Page 80: Offline Strategien für HTML5 Web Applikationen - dwx13

File API

Offline Strategien für HTML5 Web Applikationen

FileReader API und FileWriter API

Page 81: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Vorarbeiten

Offline Strategien für HTML5 Web Applikationen

var onError = function(e) {var msg = '';

switch(e.code) {case FileError.QUOTA_EXCEEDED_ERR:

msg = 'QUOTA_EXCEEDED_ERR'; break;case FileError.NOT_FOUND_ERR:

msg = 'NOT_FOUND_ERR'; break;case FileError.SECURITY_ERR:

msg = 'SECURITY_ERR'; break;case FileError.INVALID_MODIFICATION_ERR:

msg = 'INVALID_MODIFICATION_ERR'; break;case FileError.INVALID_STATE_ERR:

msg = 'INVALID_STATE_ERR'; break;default:

msg = 'Unknown Error'; break;};

alert("Error: " + msg);};

Page 82: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Vorarbeiten II

Offline Strategien für HTML5 Web Applikationen

// File system has been prefixed as of Google Chrome 12window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder;

var size = 5 * 1024*1024; // 5MB

Page 83: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Quota anfordern

Offline Strategien für HTML5 Web Applikationen

// request quota for persistent storewindow.webkitStorageInfo.requestQuota(

PERSISTENT,size,function(grantedBytes) {

window.requestFileSystem(PERSISTENT,grantedBytes,function(fs) {

// @TODO: access filesystem}

}}

}

Page 84: Offline Strategien für HTML5 Web Applikationen - dwx13

Offline Strategien für HTML5 Web Applikationen

Page 85: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten hinzufügen

Offline Strategien für HTML5 Web Applikationen

function add(item) { window.webkitStorageInfo.requestQuota(

PERSISTENT, size, function(grantedBytes) {

window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){

writeToFile(fs, item); }, onError

); }, function(e) {

onError(e); }

); },

Page 86: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten hinzufügen II

Offline Strategien für HTML5 Web Applikationen

function writeToFile(fs, item) {fs.root.getFile(

'todo.txt',{

create: true},function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

var bb = new window.BlobBuilder();bb.append(JSON.stringify(item)+

"\n");

fileWriter.seek(fileWriter.length);fileWriter.write(

bb.getBlob('text/plain'));}, onError

);}, onError

);};

Page 87: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten hinzufügen II

Offline Strategien für HTML5 Web Applikationen

function writeToFile(fs, item) {fs.root.getFile(

'todo.txt',{

create: true},function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

var bb = new window.BlobBuilder();bb.append(JSON.stringify(item)+

"\n");

fileWriter.seek(fileWriter.length);fileWriter.write(

bb.getBlob('text/plain'));}, onError

);}, onError

);};

Deprec

ated!

Page 88: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten hinzufügen II

Offline Strategien für HTML5 Web Applikationen

function writeToFile(fs, item) {fs.root.getFile(

'todo.txt',{

create: true},function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

var blob = new Blob([ JSON.stringify(item)+"\n"]);

fileWriter.seek(fileWriter.length);fileWriter.write(blob);

}, onError);

}, onError);

};

Page 89: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten auslesen

Offline Strategien für HTML5 Web Applikationen

function read() { window.webkitStorageInfo.requestQuota(

PERSISTENT, size, function(grantedBytes) {

window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){

readFromFile(fs); }, onError

); }, function(e) {

onError(e); }

);}

Page 90: Offline Strategien für HTML5 Web Applikationen - dwx13

File API: Daten auslesen II

Offline Strategien für HTML5 Web Applikationen

function readFromFile(fs) {fs.root.getFile(

'todo.txt',{

create: true},function(fileEntry) {

fileEntry.file(function(file){var reader = new FileReader();reader.onloadend = function(e) {

if (evt.target.readyState == FileReader.DONE) { // process this.result}

};reader.readAsText(file);

});}, onError

);}

Page 91: Offline Strategien für HTML5 Web Applikationen - dwx13

Bin ich online?

Offline Strategien für HTML5 Web Applikationen

Page 92: Offline Strategien für HTML5 Web Applikationen - dwx13

Bin ich online?

Offline Strategien für HTML5 Web Applikationen

document.body.addEventListener("online", function () { // browser is online!}

document.body.addEventListener("offline", function () { // browser is not online!}

Page 93: Offline Strategien für HTML5 Web Applikationen - dwx13

Bin ich online? Andere Vorgehensweise...

Offline Strategien für HTML5 Web Applikationen

$.ajax({ dataType: 'json', url: 'http://myappurl.com/ping', success: function(data){ // ping worked }, error: function() { // ping failed -> Server not reachable }});

Page 94: Offline Strategien für HTML5 Web Applikationen - dwx13

Datensynchronisation

Offline Strategien für HTML5 Web Applikationen

Page 95: Offline Strategien für HTML5 Web Applikationen - dwx13

Datensynchronisation

Offline Strategien für HTML5 Web Applikationen

PouchDB, the JavaScript Database that syncs!

Page 96: Offline Strategien für HTML5 Web Applikationen - dwx13

Frontend-Only Web Apps

Offline Strategien für HTML5 Web Applikationen

Page 97: Offline Strategien für HTML5 Web Applikationen - dwx13

Frontend-Only Web Apps

Offline Strategien für HTML5 Web Applikationen

„Hoodie is an architecture for

frontend-only web apps“

Page 98: Offline Strategien für HTML5 Web Applikationen - dwx13

Browserunterstützung?

Offline strategies for HTML5 web applications

Page 99: Offline Strategien für HTML5 Web Applikationen - dwx13

Browserunterstützung?

Offline Strategien für HTML5 Web Applikationen

App Cache Web Storage WebSQL IndexedDB File API Data URI

IE 10.0 8.0 10.0 10.0 - 8.0*

Firefox 11.0 11.0 11.0 11.0 19.0 16.0

Chrome 18.0 18.0 18.0 18.0 18.0 18.0

Safari 5.1 5.1 5.1 - - 5.1

Opera 12.1 12.1 12.1 - - 12.1

iOS Safari 3.2 3.2 3.2 - - 3.2

Android 2.1 2.1 2.1 - - 2.1

Quelle: http://caniuse.com

Page 100: Offline Strategien für HTML5 Web Applikationen - dwx13

Speicherplatzbeschränkung?

Offline Strategien für HTML5 Web Applikationen

Page 101: Offline Strategien für HTML5 Web Applikationen - dwx13

Speicherplatzbeschränkung?

Offline Strategien für HTML5 Web Applikationen

Alle vorgestellten Technologien sind durch Quotas beschränkt.

Page 102: Offline Strategien für HTML5 Web Applikationen - dwx13

Speicherplatzbeschränkung?

Offline Strategien für HTML5 Web Applikationen

App Cache Web Storage WebSQL IndexedDB File API

iOS 5.1 10 MB 5 MB 5 MB 5 MB

Android 4 unlimited 5 MB ? ?

Safari 5.2 unlimited 5 MB 5 MB 5 MB

Chrome 18 5 MB 5 MB unlimited unlimited unlimited

IE 10 50 MB 10 MB 500 MB 500 MB

Opera 11 50 MB 5 MB 5 MB 5 MB

Firefox 11 unlimited 10 MB 50 MB 50 MB

Minimumwerte, je nach Konfiguration ist mehr möglich.

Page 103: Offline Strategien für HTML5 Web Applikationen - dwx13

Vielen Dank!


Recommended