Offline Strategien für HTML5 Web Applikationen - dwx13
Upcoming SlideShare
Loading in...5
×
 

Offline Strategien für HTML5 Web Applikationen - dwx13

on

  • 1,061 views

 

Statistics

Views

Total Views
1,061
Views on SlideShare
1,040
Embed Views
21

Actions

Likes
0
Downloads
8
Comments
0

2 Embeds 21

https://twitter.com 12
http://lanyrd.com 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13 Presentation Transcript

    • Offline Strategien fürHTML5 Web ApplikationenStephan 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 ApplikationenDaten auf dem Client speichern?
    • Offline Strategien für HTML5 Web ApplikationenWie wurde dies in der Vergangenheit gelöst?
    • Offline Strategien für HTML5 Web ApplikationenCookies. Lecker aber mehr auch nicht.
    • Offline Strategien für HTML5 Web ApplikationenIE DHTML behaviours
    • Offline Strategien für HTML5 Web ApplikationenFlash Cookies schmecken auch lecker.
    • Offline Strategien für HTML5 Web ApplikationenGoogle Gears mit neuem Ansatz.
    • Gibt es nichts wirklich sinnvolles?Offline Strategien für HTML5 Web Applikationen
    • Offline Strategien für HTML5 Web Applikationenals Ausweg...
    • Offline Strategien für HTML5 Web Applikationen[...] we take the next step,announcing 2014 as the target forRecommendation.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 ApplikationenApplikation vs. Content
    • Was bedeutet „offline“?Offline Strategien für HTML5 Web ApplikationenApplication Cache vs. Offline Storage
    • App Cache für statische RessourcenOffline 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 RessourcenOffline Strategien für HTML5 Web ApplikationenHTML Page:cache.manifest (Content-Type: text/cache-manifest):CACHE MANIFESTjs/app.jscss/app.cssfavicon.icohttp://someotherdomain.com/image.png
    • App Cache für statische RessourcenOffline Strategien für HTML5 Web ApplikationenCACHE MANIFEST# 2012-09-16NETWORK:data.phpCACHE:/main/home/main/app.js/settings/home/settings/app.jshttp://myhost/logo.pnghttp://myhost/check.pnghttp://myhost/cross.png
    • App Cache für statische RessourcenOffline Strategien für HTML5 Web ApplikationenCACHE MANIFEST# 2012-09-16FALLBACK:/ /offline.htmlNETWORK:*
    • App Cache ScriptingOffline 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++;};
    • App Cache ScriptingOffline 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 pagewindow.applicationCache.swapCache();if (confirm(New version is available. Load it?)) {window.location.reload();}} else {// Manifest didnt change...}}, false);}, false);
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen1. Dateien werden immer(!) vomlokalen Cache ausgeliefert.
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen2. Der lokale Cache wird nur dannaktualisiert wenn sich die manifestDatei geändert hat.
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen3. Nicht ladbare Dateien aus derCACHE Sektion führen dazu dass derCache invalide ist.
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen4. Kann die manifest Datei nichtgeladen werden, erfolgt kein Caching!
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen5. Nicht gecachte Ressourcen werdenauf einer gecachten Seite nichtangezeigt.
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen6. Nach Aktualisierung des Cachesmuss die Seite neu geladen werden!
    • App Cache – Einige Fallstricke!Offline Strategien für HTML5 Web Applikationen7. Mit expires Header arbeiten um dasCachen des manifests zu verhinden!
    • App Cache – Was darf gecacht werden?Offline Strategien für HTML5 Web ApplikationenJa:SchriftenStartbildApplikationsiconEinstiegsseiteFallbackseiteNein:CSSHTMLJavascript
    • App Cache – Was darf gecacht werden?Offline Strategien für HTML5 Web ApplikationenDen App Cache nur für„statischen Content“ verwenden!
    • Data URI SchemaOffline 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,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 SchemaOffline Strategien für HTML5 Web Applikationen
    • Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web Applikationen
    • Offline Strategien für HTML5 Web ApplikationenBeispiel: Todoliste
    • Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web ApplikationenSourcen:github.com/bitExpert/html5-offline
    • Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web ApplikationenWeb Storage, Web SQL Database,IndexedDB, File API
    • Web StorageOffline Strategien für HTML5 Web Applikationen
    • Web StorageOffline Strategien für HTML5 Web ApplikationenKomfortable Art Daten offline zuspeichern: Key/Value Speicher
    • Web Storage: 2 MöglichkeitenOffline Strategien für HTML5 Web ApplikationenlocalStorage vs. sessionStorage
    • Web Storage: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationenfunction 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);}}
    • Web Storage: Datensatz ändernOffline Strategien für HTML5 Web Applikationenfunction modify(item) {try {// store object as stringlocalStorage.setItem(item.id,JSON.stringify(item));}catch(ex) {console.log(ex);}}
    • Web Storage: Datensatz löschenOffline Strategien für HTML5 Web Applikationenfunction remove (id) {try {localStorage.removeItem(id);}catch(ex) {console.log(ex);}}
    • Web Storage: Datensätze auslesenOffline Strategien für HTML5 Web Applikationenfunction read() {try {var lastIdx = get_lastIndex();for(var i = 1; i <= lastIdx; i++) {if(null !== localStorage.getItem(i)) {// parse and render itemvar 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 ApplikationenErsetze „localStorage“durch „sessionStorage“
    • Web Storage: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationenfunction 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);}}
    • Web Storage: Alternative ZugriffsmöglichkeitenOffline Strategien für HTML5 Web Applikationenvar value = "my value";// method calllocalStorage.setItem("key", value);// Array accessorlocalStorage[key] = value;// Property accessorlocalStorage.key = value;
    • Offline Strategien für HTML5 Web ApplikationenWelche Daten sind gespeichert?
    • Web Storage: VorteileOffline Strategien für HTML5 Web ApplikationenDie meisten der aktuellen Browser„können“ Web Storage.
    • Web Storage: NachteileOffline Strategien für HTML5 Web ApplikationenDaten werden unstrukturiertgespeichert.
    • Web Storage: NachteileOffline Strategien für HTML5 Web ApplikationenNicht Transaktionsfähig!
    • Web Storage: NachteileOffline Strategien für HTML5 Web ApplikationenDaten können nicht automatischverfallen. Manueller Aufwand nötig.
    • Web Storage: NachteileOffline Strategien für HTML5 Web ApplikationenUnzureichende Informationen wievoll der lokale Cache wirklich ist.
    • Web SQL DatabaseOffline Strategien für HTML5 Web Applikationen
    • Web SQL DatabaseOffline Strategien für HTML5 Web ApplikationenEine lokale SQL Datenbankauf SQLite Basis.
    • Web SQL Database: CallbacksOffline Strategien für HTML5 Web Applikationenvar 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));}};
    • Web SQL Database: Datenbank erzeugenOffline 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);});
    • Web SQL Database: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationenfunction add(item) {db.transaction(function(tx) {tx.executeSql(INSERT INTO todo (todo) VALUES (?),[item.todo],onSuccess,onError);});}
    • Web SQL Database: Datensatz verändernOffline Strategien für HTML5 Web Applikationenfunction modify(item) {db.transaction(function(tx) {tx.executeSql(UPDATE todo SET todo = ? WHERE id = ?,[item.todoitem.id],onSuccess,onError);});}
    • Web SQL Database: Datensatz löschenOffline Strategien für HTML5 Web Applikationenfunction remove(id) {db.transaction(function (tx) {tx.executeSql(DELETE FROM todo WHERE id = ?,[id],onSuccess,onError);});}
    • Web SQL Database: Datensätze auslesenOffline Strategien für HTML5 Web Applikationenfunction read() {db.transaction(function (tx) {tx.executeSql(SELECT * FROM todo,[],onSuccess,onError);});}
    • Web SQL Database: VorteileOffline Strategien für HTML5 Web ApplikationenEine SQL Datenbank im Browser!
    • Web SQL Database: NachteileOffline Strategien für HTML5 Web ApplikationenEine SQL Datenbank im Browser!
    • Web SQL Database: NachteileOffline Strategien für HTML5 Web ApplikationenSQLite kann seeeehr langsam sein!
    • Web SQL Database: NachteileOffline Strategien für HTML5 Web ApplikationenNicht länger Teil derHTML5 Spezifikation!
    • IndexedDBOffline Strategien für HTML5 Web Applikationen
    • IndexedDBOffline Strategien für HTML5 Web ApplikationenKompromiss aus Web Storageund Web SQL Database.
    • Web SQL Database vs. IndexedDBOffline Strategien für HTML5 Web ApplikationenKategorie Web SQL IndexedDBSpeicherart Tabellen mit Spalten undZeilenObjectstore mit Javascript Objekten undKeysAbfragemechanismusSQL Cursor APIs, Key Range APIs undApplicationslogikTransaktionalitätLock für Databanken,Tabellen oder Zeilen beiREAD_WRITE TransaktionenLocks für Datenbanken(VERSION_CHANGE Transaktion) undObjectstores (READ_ONLY, READ_WRITETransaktion).Transaktions-CommitsTransaktionen werden explizterzeugt. Standard: Rollback,außer es wird explizit eincommit ausgeführt.Transaktionen werden explizt erzeugt.Standard: Committen sofern kein Fehleraufgetreten ist.
    • IndexedDB: VorarbeitenOffline 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;
    • IndexedDB: Objektspeicher erzeugenOffline Strategien für HTML5 Web Applikationenvar 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ügenOffline Strategien für HTML5 Web Applikationenfunction 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ändernOffline Strategien für HTML5 Web Applikationenfunction 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öschenOffline Strategien für HTML5 Web Applikationenfunction 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 auslesenOffline Strategien für HTML5 Web Applikationenfunction 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);}}
    • IndexedDB: VorteileOffline Strategien für HTML5 Web ApplikationenNeuer Standard der künftig durchviele Browser unterstützt wird.
    • IndexedDB: NachteileOffline Strategien für HTML5 Web ApplikationenNur ein Index proObjektspeicher möglich.
    • File APIOffline Strategien für HTML5 Web Applikationen
    • File APIOffline Strategien für HTML5 Web ApplikationenFileReader API und FileWriter API
    • File API: VorarbeitenOffline Strategien für HTML5 Web Applikationenvar 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 IIOffline 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
    • File API: Quota anfordernOffline 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}}}}
    • Offline Strategien für HTML5 Web Applikationen
    • File API: Daten hinzufügenOffline Strategien für HTML5 Web Applikationenfunction 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 IIOffline Strategien für HTML5 Web Applikationenfunction 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 IIOffline Strategien für HTML5 Web Applikationenfunction 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 IIOffline Strategien für HTML5 Web Applikationenfunction 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 auslesenOffline Strategien für HTML5 Web Applikationenfunction 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 IIOffline Strategien für HTML5 Web Applikationenfunction 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 Applikationendocument.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}});
    • DatensynchronisationOffline Strategien für HTML5 Web Applikationen
    • DatensynchronisationOffline Strategien für HTML5 Web ApplikationenPouchDB, the JavaScriptDatabase that syncs!
    • Frontend-Only Web AppsOffline Strategien für HTML5 Web Applikationen
    • Frontend-Only Web AppsOffline Strategien für HTML5 Web Applikationen„Hoodie is an architecture forfrontend-only web apps“
    • Browserunterstützung?Offline strategies for HTML5 web applications
    • Browserunterstützung?Offline Strategien für HTML5 Web ApplikationenApp Cache Web Storage WebSQL IndexedDB File API Data URIIE 10.0 8.0 10.0 10.0 - 8.0*Firefox 11.0 11.0 11.0 11.0 19.0 16.0Chrome 18.0 18.0 18.0 18.0 18.0 18.0Safari 5.1 5.1 5.1 - - 5.1Opera 12.1 12.1 12.1 - - 12.1iOS Safari 3.2 3.2 3.2 - - 3.2Android 2.1 2.1 2.1 - - 2.1Quelle: http://caniuse.com
    • Speicherplatzbeschränkung?Offline Strategien für HTML5 Web Applikationen
    • Speicherplatzbeschränkung?Offline Strategien für HTML5 Web ApplikationenAlle vorgestellten Technologien sinddurch Quotas beschränkt.
    • Speicherplatzbeschränkung?Offline Strategien für HTML5 Web ApplikationenApp Cache Web Storage WebSQL IndexedDB File APIiOS 5.1 10 MB 5 MB 5 MB 5 MBAndroid 4 unlimited 5 MB ? ?Safari 5.2 unlimited 5 MB 5 MB 5 MBChrome 18 5 MB 5 MB unlimited unlimited unlimitedIE 10 50 MB 10 MB 500 MB 500 MBOpera 11 50 MB 5 MB 5 MB 5 MBFirefox 11 unlimited 10 MB 50 MB 50 MBMinimumwerte, je nach Konfiguration ist mehr möglich.
    • Vielen Dank!