SlideShare ist ein Scribd-Unternehmen logo
1 von 103
Downloaden Sie, um offline zu lesen
Offline Strategien für
HTML5 Web Applikationen
Stephan Hochdörfer, bitExpert AG
Offline Strategien für HTML5 Web Applikationen
Über mich
 Stephan Hochdörfer
 Head of IT der bitExpert AG, Mannheim
 PHP`ler seit 1999
 S.Hochdoerfer@bitExpert.de
 @shochdoerfer
Offline Strategien für HTML5 Web Applikationen
Daten auf dem Client speichern?
Offline Strategien für HTML5 Web Applikationen
Wie wurde dies in der Vergangenheit gelöst?
Offline Strategien für HTML5 Web Applikationen
Cookies. Lecker aber mehr auch nicht.
Offline Strategien für HTML5 Web Applikationen
IE DHTML behaviours
Offline Strategien für HTML5 Web Applikationen
Flash Cookies schmecken auch lecker.
Offline Strategien für HTML5 Web Applikationen
Google Gears mit neuem Ansatz.
Gibt es nichts wirklich sinnvolles?
Offline Strategien für HTML5 Web Applikationen
Offline Strategien für HTML5 Web Applikationen
als Ausweg...
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
Offline Strategien für HTML5 Web Applikationen
Offline Strategien für HTML5 Web Applikationen
Was bedeutet „offline“?
Offline Strategien für HTML5 Web Applikationen
Was bedeutet „offline“?
Offline Strategien für HTML5 Web Applikationen
Applikation vs. Content
Was bedeutet „offline“?
Offline Strategien für HTML5 Web Applikationen
Application Cache vs. Offline Storage
App Cache für statische Ressourcen
Offline Strategien für HTML5 Web Applikationen
<!DOCTYPE html>
<html lang="en">
HTML Page:
<!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.js
css/app.css
favicon.ico
http://someotherdomain.com/image.png
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.js
http://myhost/logo.png
http://myhost/check.png
http://myhost/cross.png
App Cache für statische Ressourcen
Offline Strategien für HTML5 Web Applikationen
CACHE MANIFEST
# 2012-09-16
FALLBACK:
/ /offline.html
NETWORK:
*
App Cache Scripting
Offline Strategien für HTML5 Web Applikationen
// events fired by window.applicationCache
window.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 file
window.applicationCache.onprogress = function(e) {
log("Progress: downloaded file " + counter);
counter++;
};
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);
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
1. Dateien werden immer(!) vom
lokalen Cache ausgeliefert.
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.
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.
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
4. Kann die manifest Datei nicht
geladen werden, erfolgt kein Caching!
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
5. Nicht gecachte Ressourcen werden
auf einer gecachten Seite nicht
angezeigt.
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
6. Nach Aktualisierung des Caches
muss die Seite neu geladen werden!
App Cache – Einige Fallstricke!
Offline Strategien für HTML5 Web Applikationen
7. Mit expires Header arbeiten um das
Cachen des manifests zu verhinden!
App Cache – Was darf gecacht werden?
Offline Strategien für HTML5 Web Applikationen
Ja:

Schriften

Startbild

Applikationsicon

Einstiegsseite

Fallbackseite
Nein:

CSS

HTML

Javascript
App Cache – Was darf gecacht werden?
Offline Strategien für HTML5 Web Applikationen
Den App Cache nur für
„statischen Content“ verwenden!
Data URI Schema
Offline Strategien für HTML5 Web Applikationen
<!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,iVBORw0KGgoAAAANSUhEUgAAAAUAAA
AFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAA
O9TXL0Y4OHwAAAABJRU5ErkJggg==') no­repeat scroll left 
top;
}
  </style>
 </head>
 <body>
  <img 
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAA
AFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAA
O9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
 </body>
</html>
Data URI Schema
Offline Strategien für HTML5 Web Applikationen
Dynamische Daten lokal speichern...
Offline Strategien für HTML5 Web Applikationen
Offline Strategien für HTML5 Web Applikationen
Beispiel: Todoliste
Dynamische Daten lokal speichern...
Offline Strategien für HTML5 Web Applikationen
Sourcen:
github.com/bitExpert/html5-offline
Dynamische Daten lokal speichern...
Offline Strategien für HTML5 Web Applikationen
Web Storage, Web SQL Database,
IndexedDB, File API
Web Storage
Offline Strategien für HTML5 Web Applikationen
Web Storage
Offline Strategien für HTML5 Web Applikationen
Komfortable Art Daten offline zu
speichern: Key/Value Speicher
Web Storage: 2 Möglichkeiten
Offline Strategien für HTML5 Web Applikationen
localStorage vs. sessionStorage
Web Storage: Datensatz hinzufügen
Offline Strategien für HTML5 Web Applikationen
function add(item) {
try {
// for a new item set id
if((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {
item.id = get_lastIndex() + 1;
}
// store object as string
localStorage.setItem(item.id,
JSON.stringify(item)
);
// update the index
set_lastIndex(item.id);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Datensatz ändern
Offline Strategien für HTML5 Web Applikationen
function modify(item) {
try {
// store object as string
localStorage.setItem(item.id,
JSON.stringify(item)
);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Datensatz löschen
Offline Strategien für HTML5 Web Applikationen
function remove (id) {
try {
localStorage.removeItem(id);
}
catch(ex) {
console.log(ex);
}
}
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);
}
}
Web Storage: Wie sessionStorage nutzen?
Offline Strategien für HTML5 Web Applikationen
Web Storage: Wie sessionStorage nutzen?
Offline Strategien für HTML5 Web Applikationen
Ersetze „localStorage“
durch „sessionStorage“
Web Storage: Datensatz hinzufügen
Offline Strategien für HTML5 Web Applikationen
function add(item) {
try {
// for a new item set id
if((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {
item.id = get_lastIndex() + 1;
}
// store object as string
sessionStorage.setItem(item.id,
JSON.stringify(item)
);
// update the index
set_lastIndex(item.id);
}
catch(ex) {
console.log(ex);
}
}
Web Storage: Alternative Zugriffsmöglichkeiten
Offline Strategien für HTML5 Web Applikationen
var value = "my value";
// method call
localStorage.setItem("key", value);
// Array accessor
localStorage[key] = value;
// Property accessor
localStorage.key = value;
Offline Strategien für HTML5 Web Applikationen
Welche Daten sind gespeichert?
Web Storage: Vorteile
Offline Strategien für HTML5 Web Applikationen
Die meisten der aktuellen Browser
„können“ Web Storage.
Web Storage: Nachteile
Offline Strategien für HTML5 Web Applikationen
Daten werden unstrukturiert
gespeichert.
Web Storage: Nachteile
Offline Strategien für HTML5 Web Applikationen
Nicht Transaktionsfähig!
Web Storage: Nachteile
Offline Strategien für HTML5 Web Applikationen
Daten können nicht automatisch
verfallen. Manueller Aufwand nötig.
Web Storage: Nachteile
Offline Strategien für HTML5 Web Applikationen
Unzureichende Informationen wie
voll der lokale Cache wirklich ist.
Web SQL Database
Offline Strategien für HTML5 Web Applikationen
Web SQL Database
Offline Strategien für HTML5 Web Applikationen
Eine lokale SQL Datenbank
auf SQLite Basis.
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 item
render(results.rows.item(i));
}
};
Web SQL Database: Datenbank erzeugen
Offline Strategien für HTML5 Web Applikationen
// initalize the database connection
var 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
);
});
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
);
});
}
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.todo
item.id
],
onSuccess,
onError
);
});
}
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
);
});
}
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
);
});
}
Web SQL Database: Vorteile
Offline Strategien für HTML5 Web Applikationen
Eine SQL Datenbank im Browser!
Web SQL Database: Nachteile
Offline Strategien für HTML5 Web Applikationen
Eine SQL Datenbank im Browser!
Web SQL Database: Nachteile
Offline Strategien für HTML5 Web Applikationen
SQLite kann seeeehr langsam sein!
Web SQL Database: Nachteile
Offline Strategien für HTML5 Web Applikationen
Nicht länger Teil der
HTML5 Spezifikation!
IndexedDB
Offline Strategien für HTML5 Web Applikationen
IndexedDB
Offline Strategien für HTML5 Web Applikationen
Kompromiss aus Web Storage
und Web SQL Database.
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
Abfrage
mechanismus
SQL Cursor APIs, Key Range APIs und
Applicationslogik
Transaktionali
tä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.
IndexedDB: Vorarbeiten
Offline Strategien für HTML5 Web Applikationen
// different browsers, different naming conventions
var indexedDB = window.indexedDB ||
window.webkitIndexedDB || window.mozIndexedDB ||
window.msIndexedDB;
var IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange;
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() {};
};
}
};
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);
}
}
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);
}
}
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);
}
}
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.value
result.continue();
};
}
catch(ex) {
onError(ex);
}
}
IndexedDB: Vorteile
Offline Strategien für HTML5 Web Applikationen
Neuer Standard der künftig durch
viele Browser unterstützt wird.
IndexedDB: Nachteile
Offline Strategien für HTML5 Web Applikationen
Nur ein Index pro
Objektspeicher möglich.
File API
Offline Strategien für HTML5 Web Applikationen
File API
Offline Strategien für HTML5 Web Applikationen
FileReader API und FileWriter API
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);
};
File API: Vorarbeiten II
Offline Strategien für HTML5 Web Applikationen
// File system has been prefixed as of Google Chrome 12
window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem;
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder;
var size = 5 * 1024*1024; // 5MB
File API: Quota anfordern
Offline Strategien für HTML5 Web Applikationen
// request quota for persistent store
window.webkitStorageInfo.requestQuota(
PERSISTENT,
size,
function(grantedBytes) {
window.requestFileSystem(
PERSISTENT,
grantedBytes,
function(fs) {
// @TODO: access filesystem
}
}
}
}
Offline Strategien für HTML5 Web Applikationen
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);
}
);
},
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
);
};
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
);
};
Deprecated!
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
);
};
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);
}
);
}
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
);
}
Bin ich online?
Offline Strategien für HTML5 Web Applikationen
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!
}
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
}
});
Datensynchronisation
Offline Strategien für HTML5 Web Applikationen
Datensynchronisation
Offline Strategien für HTML5 Web Applikationen
PouchDB, the JavaScript
Database that syncs!
Frontend-Only Web Apps
Offline Strategien für HTML5 Web Applikationen
Frontend-Only Web Apps
Offline Strategien für HTML5 Web Applikationen
„Hoodie is an architecture for
frontend-only web apps“
Browserunterstützung?
Offline strategies for HTML5 web applications
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
Speicherplatzbeschränkung?
Offline Strategien für HTML5 Web Applikationen
Speicherplatzbeschränkung?
Offline Strategien für HTML5 Web Applikationen
Alle vorgestellten Technologien sind
durch Quotas beschränkt.
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.
Vielen Dank!

Weitere ähnliche Inhalte

Andere mochten auch

Freie Foto-Wiederaufnahme
Freie Foto-WiederaufnahmeFreie Foto-Wiederaufnahme
Freie Foto-Wiederaufnahmejuliaerika86
 
Wirkungsvoll präsentieren – Das Buch voller Ideen
Wirkungsvoll präsentieren – Das Buch voller IdeenWirkungsvoll präsentieren – Das Buch voller Ideen
Wirkungsvoll präsentieren – Das Buch voller IdeenBusinessVillage GmbH
 
Gastvorlesung Web2 0 2010
Gastvorlesung Web2 0 2010Gastvorlesung Web2 0 2010
Gastvorlesung Web2 0 2010herwig Danzer
 
Kommunikation verkaufen [Marketing, Design, Text]
Kommunikation verkaufen [Marketing, Design, Text]Kommunikation verkaufen [Marketing, Design, Text]
Kommunikation verkaufen [Marketing, Design, Text]BusinessVillage GmbH
 
Presentation som updload
Presentation som updloadPresentation som updload
Presentation som updloadAlain Veuve
 
Wallfahrtsorte und Pilgerwege
Wallfahrtsorte und PilgerwegeWallfahrtsorte und Pilgerwege
Wallfahrtsorte und PilgerwegeMichael Weyer
 
Was ist Dir wichtig?
Was ist Dir wichtig?Was ist Dir wichtig?
Was ist Dir wichtig?loveroflife
 
Meerschweinchen Hasenstall
Meerschweinchen Hasenstall Meerschweinchen Hasenstall
Meerschweinchen Hasenstall shellyw
 
TOP BRANDS - Marken, die die Märkte prägten
TOP BRANDS - Marken, die die Märkte prägtenTOP BRANDS - Marken, die die Märkte prägten
TOP BRANDS - Marken, die die Märkte prägtenBusinessVillage GmbH
 
Verlagsprogramm Herbst/Winter 2014
Verlagsprogramm Herbst/Winter 2014Verlagsprogramm Herbst/Winter 2014
Verlagsprogramm Herbst/Winter 2014BusinessVillage GmbH
 
Doubt
DoubtDoubt
Doubtasfd
 

Andere mochten auch (20)

Freie Foto-Wiederaufnahme
Freie Foto-WiederaufnahmeFreie Foto-Wiederaufnahme
Freie Foto-Wiederaufnahme
 
Wirkungsvoll präsentieren – Das Buch voller Ideen
Wirkungsvoll präsentieren – Das Buch voller IdeenWirkungsvoll präsentieren – Das Buch voller Ideen
Wirkungsvoll präsentieren – Das Buch voller Ideen
 
Gastvorlesung Web2 0 2010
Gastvorlesung Web2 0 2010Gastvorlesung Web2 0 2010
Gastvorlesung Web2 0 2010
 
Kommunikation verkaufen [Marketing, Design, Text]
Kommunikation verkaufen [Marketing, Design, Text]Kommunikation verkaufen [Marketing, Design, Text]
Kommunikation verkaufen [Marketing, Design, Text]
 
Denkfallen
DenkfallenDenkfallen
Denkfallen
 
Avon15
Avon15Avon15
Avon15
 
Verlagsvorschau Herbst 2015
Verlagsvorschau Herbst 2015Verlagsvorschau Herbst 2015
Verlagsvorschau Herbst 2015
 
Presentation som updload
Presentation som updloadPresentation som updload
Presentation som updload
 
Wallfahrtsorte und Pilgerwege
Wallfahrtsorte und PilgerwegeWallfahrtsorte und Pilgerwege
Wallfahrtsorte und Pilgerwege
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computing
 
Was ist Dir wichtig?
Was ist Dir wichtig?Was ist Dir wichtig?
Was ist Dir wichtig?
 
Meerschweinchen Hasenstall
Meerschweinchen Hasenstall Meerschweinchen Hasenstall
Meerschweinchen Hasenstall
 
TOP BRANDS - Marken, die die Märkte prägten
TOP BRANDS - Marken, die die Märkte prägtenTOP BRANDS - Marken, die die Märkte prägten
TOP BRANDS - Marken, die die Märkte prägten
 
Sag doch JA!
Sag doch JA!Sag doch JA!
Sag doch JA!
 
Verlagsprogramm Herbst/Winter 2014
Verlagsprogramm Herbst/Winter 2014Verlagsprogramm Herbst/Winter 2014
Verlagsprogramm Herbst/Winter 2014
 
Doubt
DoubtDoubt
Doubt
 
Furchtlos verkaufen
Furchtlos verkaufenFurchtlos verkaufen
Furchtlos verkaufen
 
Citrix Vdi In A Box
Citrix Vdi In A BoxCitrix Vdi In A Box
Citrix Vdi In A Box
 
Christiane Hoffrath: Restitution von „NS-Raubgut“ in Bibliotheken
Christiane Hoffrath: Restitution von „NS-Raubgut“ in BibliothekenChristiane Hoffrath: Restitution von „NS-Raubgut“ in Bibliotheken
Christiane Hoffrath: Restitution von „NS-Raubgut“ in Bibliotheken
 
StockHit World EQUITY
StockHit World EQUITYStockHit World EQUITY
StockHit World EQUITY
 

Ähnlich wie Offline Strategien für HTML5 Web Applikationen - dwx13

Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS ProgrammierungMarkus Leutwyler
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im EinsatzOpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im EinsatzDigicomp Academy AG
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepageAlex Kellner
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidBjörn Wibben
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Marc Müller
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from ScratchNokiaAppForum
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site GeneratorsDietrichRordorf
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenBjoern Reinhold
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenDanny Linden
 

Ähnlich wie Offline Strategien für HTML5 Web Applikationen - dwx13 (20)

Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im EinsatzOpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
OpenTuesday: Jede Sekunde zählt - Webbeschleuniger Varnish im Einsatz
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
 
HTML5
HTML5HTML5
HTML5
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 

Mehr von Stephan Hochdörfer

Phing for power users - frOSCon8
Phing for power users - frOSCon8Phing for power users - frOSCon8
Phing for power users - frOSCon8Stephan Hochdörfer
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Stephan Hochdörfer
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Stephan Hochdörfer
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Stephan Hochdörfer
 
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Stephan Hochdörfer
 
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Stephan Hochdörfer
 
Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13Stephan Hochdörfer
 
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Stephan Hochdörfer
 
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Stephan Hochdörfer
 
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Stephan Hochdörfer
 
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Stephan Hochdörfer
 
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Stephan Hochdörfer
 
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12Stephan Hochdörfer
 
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Stephan Hochdörfer
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Stephan Hochdörfer
 
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Stephan Hochdörfer
 
Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12Stephan Hochdörfer
 
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Stephan Hochdörfer
 

Mehr von Stephan Hochdörfer (20)

Phing for power users - frOSCon8
Phing for power users - frOSCon8Phing for power users - frOSCon8
Phing for power users - frOSCon8
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
 
Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13Real World Dependency Injection - oscon13
Real World Dependency Injection - oscon13
 
Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13Dependency Injection in PHP - dwx13
Dependency Injection in PHP - dwx13
 
Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13Your Business. Your Language. Your Code - dpc13
Your Business. Your Language. Your Code - dpc13
 
Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13Phing for power users - dpc_uncon13
Phing for power users - dpc_uncon13
 
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13
 
Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13Real World Dependency Injection - phpugffm13
Real World Dependency Injection - phpugffm13
 
Testing untestable code - ConFoo13
Testing untestable code - ConFoo13Testing untestable code - ConFoo13
Testing untestable code - ConFoo13
 
A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13A Phing fairy tale - ConFoo13
A Phing fairy tale - ConFoo13
 
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13
 
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
 
Testing untestable code - IPC12
Testing untestable code - IPC12Testing untestable code - IPC12
Testing untestable code - IPC12
 
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12
 
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
Große Systeme, lose Kopplung, Spaß bei der Arbeit! - WDC12
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
 
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
 
Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12Testing untestable code - Herbstcampus12
Testing untestable code - Herbstcampus12
 
Testing untestable code - oscon 2012
Testing untestable code - oscon 2012Testing untestable code - oscon 2012
Testing untestable code - oscon 2012
 

Offline Strategien für HTML5 Web Applikationen - dwx13

  • 1. Offline Strategien für HTML5 Web Applikationen Stephan Hochdörfer, bitExpert AG
  • 2. Offline Strategien für HTML5 Web Applikationen Über mich  Stephan Hochdörfer  Head of IT der bitExpert AG, Mannheim  PHP`ler seit 1999  S.Hochdoerfer@bitExpert.de  @shochdoerfer
  • 3. Offline Strategien für HTML5 Web Applikationen Daten auf dem Client speichern?
  • 4. Offline Strategien für HTML5 Web Applikationen Wie wurde dies in der Vergangenheit gelöst?
  • 5. Offline Strategien für HTML5 Web Applikationen Cookies. Lecker aber mehr auch nicht.
  • 6. Offline Strategien für HTML5 Web Applikationen IE DHTML behaviours
  • 7. Offline Strategien für HTML5 Web Applikationen Flash Cookies schmecken auch lecker.
  • 8. Offline Strategien für HTML5 Web Applikationen Google Gears mit neuem Ansatz.
  • 9. Gibt es nichts wirklich sinnvolles? Offline Strategien für HTML5 Web Applikationen
  • 10. Offline Strategien für HTML5 Web Applikationen als Ausweg...
  • 11. 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
  • 12. Offline Strategien für HTML5 Web Applikationen
  • 13. Offline Strategien für HTML5 Web Applikationen
  • 14. Was bedeutet „offline“? Offline Strategien für HTML5 Web Applikationen
  • 15. Was bedeutet „offline“? Offline Strategien für HTML5 Web Applikationen Applikation vs. Content
  • 16. Was bedeutet „offline“? Offline Strategien für HTML5 Web Applikationen Application Cache vs. Offline Storage
  • 17. App Cache für statische Ressourcen Offline Strategien für HTML5 Web Applikationen <!DOCTYPE html> <html lang="en"> HTML Page:
  • 18. <!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.js css/app.css favicon.ico http://someotherdomain.com/image.png
  • 19. 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.js http://myhost/logo.png http://myhost/check.png http://myhost/cross.png
  • 20. App Cache für statische Ressourcen Offline Strategien für HTML5 Web Applikationen CACHE MANIFEST # 2012-09-16 FALLBACK: / /offline.html NETWORK: *
  • 21. App Cache Scripting Offline Strategien für HTML5 Web Applikationen // events fired by window.applicationCache window.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 file window.applicationCache.onprogress = function(e) { log("Progress: downloaded file " + counter); counter++; };
  • 22. 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);
  • 23. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen
  • 24. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen 1. Dateien werden immer(!) vom lokalen Cache ausgeliefert.
  • 25. 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.
  • 26. 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.
  • 27. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen 4. Kann die manifest Datei nicht geladen werden, erfolgt kein Caching!
  • 28. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen 5. Nicht gecachte Ressourcen werden auf einer gecachten Seite nicht angezeigt.
  • 29. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen 6. Nach Aktualisierung des Caches muss die Seite neu geladen werden!
  • 30. App Cache – Einige Fallstricke! Offline Strategien für HTML5 Web Applikationen 7. Mit expires Header arbeiten um das Cachen des manifests zu verhinden!
  • 31. App Cache – Was darf gecacht werden? Offline Strategien für HTML5 Web Applikationen Ja:  Schriften  Startbild  Applikationsicon  Einstiegsseite  Fallbackseite Nein:  CSS  HTML  Javascript
  • 32. App Cache – Was darf gecacht werden? Offline Strategien für HTML5 Web Applikationen Den App Cache nur für „statischen Content“ verwenden!
  • 33. Data URI Schema Offline Strategien für HTML5 Web Applikationen
  • 35. Dynamische Daten lokal speichern... Offline Strategien für HTML5 Web Applikationen
  • 36. Offline Strategien für HTML5 Web Applikationen Beispiel: Todoliste
  • 37. Dynamische Daten lokal speichern... Offline Strategien für HTML5 Web Applikationen Sourcen: github.com/bitExpert/html5-offline
  • 38. Dynamische Daten lokal speichern... Offline Strategien für HTML5 Web Applikationen Web Storage, Web SQL Database, IndexedDB, File API
  • 39. Web Storage Offline Strategien für HTML5 Web Applikationen
  • 40. Web Storage Offline Strategien für HTML5 Web Applikationen Komfortable Art Daten offline zu speichern: Key/Value Speicher
  • 41. Web Storage: 2 Möglichkeiten Offline Strategien für HTML5 Web Applikationen localStorage vs. sessionStorage
  • 42. Web Storage: Datensatz hinzufügen Offline Strategien für HTML5 Web Applikationen function add(item) { try { // for a new item set id if((typeof item.id === "undefined") || (null == item.id) || ("" == item.id)) { item.id = get_lastIndex() + 1; } // store object as string localStorage.setItem(item.id, JSON.stringify(item) ); // update the index set_lastIndex(item.id); } catch(ex) { console.log(ex); } }
  • 43. Web Storage: Datensatz ändern Offline Strategien für HTML5 Web Applikationen function modify(item) { try { // store object as string localStorage.setItem(item.id, JSON.stringify(item) ); } catch(ex) { console.log(ex); } }
  • 44. Web Storage: Datensatz löschen Offline Strategien für HTML5 Web Applikationen function remove (id) { try { localStorage.removeItem(id); } catch(ex) { console.log(ex); } }
  • 45. 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); } }
  • 46. Web Storage: Wie sessionStorage nutzen? Offline Strategien für HTML5 Web Applikationen
  • 47. Web Storage: Wie sessionStorage nutzen? Offline Strategien für HTML5 Web Applikationen Ersetze „localStorage“ durch „sessionStorage“
  • 48. Web Storage: Datensatz hinzufügen Offline Strategien für HTML5 Web Applikationen function add(item) { try { // for a new item set id if((typeof item.id === "undefined") || (null == item.id) || ("" == item.id)) { item.id = get_lastIndex() + 1; } // store object as string sessionStorage.setItem(item.id, JSON.stringify(item) ); // update the index set_lastIndex(item.id); } catch(ex) { console.log(ex); } }
  • 49. Web Storage: Alternative Zugriffsmöglichkeiten Offline Strategien für HTML5 Web Applikationen var value = "my value"; // method call localStorage.setItem("key", value); // Array accessor localStorage[key] = value; // Property accessor localStorage.key = value;
  • 50. Offline Strategien für HTML5 Web Applikationen Welche Daten sind gespeichert?
  • 51. Web Storage: Vorteile Offline Strategien für HTML5 Web Applikationen Die meisten der aktuellen Browser „können“ Web Storage.
  • 52. Web Storage: Nachteile Offline Strategien für HTML5 Web Applikationen Daten werden unstrukturiert gespeichert.
  • 53. Web Storage: Nachteile Offline Strategien für HTML5 Web Applikationen Nicht Transaktionsfähig!
  • 54. Web Storage: Nachteile Offline Strategien für HTML5 Web Applikationen Daten können nicht automatisch verfallen. Manueller Aufwand nötig.
  • 55. Web Storage: Nachteile Offline Strategien für HTML5 Web Applikationen Unzureichende Informationen wie voll der lokale Cache wirklich ist.
  • 56. Web SQL Database Offline Strategien für HTML5 Web Applikationen
  • 57. Web SQL Database Offline Strategien für HTML5 Web Applikationen Eine lokale SQL Datenbank auf SQLite Basis.
  • 58. 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 item render(results.rows.item(i)); } };
  • 59. Web SQL Database: Datenbank erzeugen Offline Strategien für HTML5 Web Applikationen // initalize the database connection var 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 ); });
  • 60. 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 ); }); }
  • 61. 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.todo item.id ], onSuccess, onError ); }); }
  • 62. 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 ); }); }
  • 63. 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 ); }); }
  • 64. Web SQL Database: Vorteile Offline Strategien für HTML5 Web Applikationen Eine SQL Datenbank im Browser!
  • 65. Web SQL Database: Nachteile Offline Strategien für HTML5 Web Applikationen Eine SQL Datenbank im Browser!
  • 66. Web SQL Database: Nachteile Offline Strategien für HTML5 Web Applikationen SQLite kann seeeehr langsam sein!
  • 67. Web SQL Database: Nachteile Offline Strategien für HTML5 Web Applikationen Nicht länger Teil der HTML5 Spezifikation!
  • 68. IndexedDB Offline Strategien für HTML5 Web Applikationen
  • 69. IndexedDB Offline Strategien für HTML5 Web Applikationen Kompromiss aus Web Storage und Web SQL Database.
  • 70. 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 Abfrage mechanismus SQL Cursor APIs, Key Range APIs und Applicationslogik Transaktionali tä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.
  • 71. IndexedDB: Vorarbeiten Offline Strategien für HTML5 Web Applikationen // different browsers, different naming conventions var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
  • 72. 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() {}; }; } };
  • 73. 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); } }
  • 74. 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); } }
  • 75. 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); } }
  • 76. 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.value result.continue(); }; } catch(ex) { onError(ex); } }
  • 77. IndexedDB: Vorteile Offline Strategien für HTML5 Web Applikationen Neuer Standard der künftig durch viele Browser unterstützt wird.
  • 78. IndexedDB: Nachteile Offline Strategien für HTML5 Web Applikationen Nur ein Index pro Objektspeicher möglich.
  • 79. File API Offline Strategien für HTML5 Web Applikationen
  • 80. File API Offline Strategien für HTML5 Web Applikationen FileReader API und FileWriter API
  • 81. 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); };
  • 82. File API: Vorarbeiten II Offline Strategien für HTML5 Web Applikationen // File system has been prefixed as of Google Chrome 12 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder; var size = 5 * 1024*1024; // 5MB
  • 83. File API: Quota anfordern Offline Strategien für HTML5 Web Applikationen // request quota for persistent store window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs) { // @TODO: access filesystem } } } }
  • 84. Offline Strategien für HTML5 Web Applikationen
  • 85. 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); } ); },
  • 86. 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 ); };
  • 87. 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 ); }; Deprecated!
  • 88. 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 ); };
  • 89. 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); } ); }
  • 90. 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 ); }
  • 91. Bin ich online? Offline Strategien für HTML5 Web Applikationen
  • 92. 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! }
  • 93. 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 } });
  • 95. Datensynchronisation Offline Strategien für HTML5 Web Applikationen PouchDB, the JavaScript Database that syncs!
  • 96. Frontend-Only Web Apps Offline Strategien für HTML5 Web Applikationen
  • 97. Frontend-Only Web Apps Offline Strategien für HTML5 Web Applikationen „Hoodie is an architecture for frontend-only web apps“
  • 99. 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
  • 101. Speicherplatzbeschränkung? Offline Strategien für HTML5 Web Applikationen Alle vorgestellten Technologien sind durch Quotas beschränkt.
  • 102. 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.