Offline Strategien für HTML5 Web ApplikationenÜber mich Stephan Hochdörfer Head of IT der bitExpert AG, Mannheim S.Hoch...
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:
CACHE MANIFESTjs/app.jscss/app.cssfavicon.icohttp://someotherdomain.com/image.png<!DOCTYPE html><html lang="en" manifest="...
App Cache – Was darf sollte gecacht werden?Offline Strategien für HTML5 Web ApplikationenJa:SchriftenStartbildApplikati...
Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web ApplikationenWeb Storage, Web SQL Database,IndexedDB, ...
Web Storage: 2 MöglichkeitenOffline Strategien für HTML5 Web ApplikationenlocalStorage vs. sessionStorage
function add(item) {try {// store object as stringlocalStorage.setItem(item.id,              JSON.stringify(item)         ...
function remove (id) {try {localStorage.removeItem(id);}catch(ex) {console.log(ex);}}Web Storage: Datensatz löschenOffline...
Web SQL DatabaseOffline Strategien für HTML5 Web ApplikationenEine lokale SQL Datenbankauf SQLite Basis.
// initalize the database connectionvar db = openDatabase(todo, 1.0, Todo Database,    5 * 1024 * 1024 );db.transaction(fu...
function add(item) {db.transaction(function(tx) {tx.executeSql(INSERT INTO todo (todo) VALUES (?),[item.todo],onSuccess,on...
function remove(id) {db.transaction(function (tx) {tx.executeSql(DELETE FROM todo WHERE id = ?,[id],onSuccess,onError);});...
IndexedDBOffline Strategien für HTML5 Web ApplikationenKompromiss aus Web Storageund Web SQL Database.
var db = null;var request = indexedDB.open("todo");request.onfailure = onError;request.onsuccess = function(e) {db = reque...
function add(item) {try {var trans = db.transaction(["todo"],              IDBTransaction.READ_WRITE);var store   = trans....
function remove(id) {try {var trans = db.transaction(["todo"],             IDBTransaction.READ_WRITE);var store   = trans....
File APIOffline Strategien für HTML5 Web ApplikationenFileReader API und FileWriter API
// request quota for persistent storewindow.webkitStorageInfo.requestQuota(PERSISTENT,size,function(grantedBytes) {window....
Offline Strategien für HTML5 Web Applikationen
function writeToFile(fs, item) {fs.root.getFile(todo.txt,{create: true},function(fileEntry) {fileEntry.createWriter(functi...
DatensynchronisationOffline Strategien für HTML5 Web ApplikationenPouchDB, the JavaScriptDatabase that Syncs!
Browserunterstützung?Offline Strategien für HTML5 Web ApplikationenApp Cache Web Storage WebSQL IndexedDB File APIIE 10.0 ...
Vielen Dank!
VerweiseOffline Strategien für HTML5 Web ApplikationenQuellcode: http://github.com/bitExpert/html5-offlinePouchDB: http://...
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
Upcoming SlideShare
Loading in...5
×

Offline-Strategien für HTML5 Web Applikationen - wmka

1,191

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,191
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Offline-Strategien für HTML5 Web Applikationen - wmka

  1. 1. Offline Strategien für HTML5 Web ApplikationenÜber mich Stephan Hochdörfer Head of IT der bitExpert AG, Mannheim S.Hochdoerfer@bitExpert.de @shochdoerfer
  2. 2. Was bedeutet „offline“?Offline Strategien für HTML5 Web ApplikationenApplication Cache vs. Offline Storage
  3. 3. App Cache für statische RessourcenOffline Strategien für HTML5 Web Applikationen<!DOCTYPE html><html lang="en">HTML Page:
  4. 4. CACHE MANIFESTjs/app.jscss/app.cssfavicon.icohttp://someotherdomain.com/image.png<!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):
  5. 5. App Cache – Was darf sollte gecacht werden?Offline Strategien für HTML5 Web ApplikationenJa:SchriftenStartbildApplikationsiconEinstiegsseiteFallbackseiteNein:CSSHTMLJavascript
  6. 6. Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web ApplikationenWeb Storage, Web SQL Database,IndexedDB, File API
  7. 7. Web Storage: 2 MöglichkeitenOffline Strategien für HTML5 Web ApplikationenlocalStorage vs. sessionStorage
  8. 8. function add(item) {try {// store object as stringlocalStorage.setItem(item.id,              JSON.stringify(item)         );}catch(ex) {console.log(ex);}}Web Storage: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationen
  9. 9. function remove (id) {try {localStorage.removeItem(id);}catch(ex) {console.log(ex);}}Web Storage: Datensatz löschenOffline Strategien für HTML5 Web Applikationen
  10. 10. Web SQL DatabaseOffline Strategien für HTML5 Web ApplikationenEine lokale SQL Datenbankauf SQLite Basis.
  11. 11. // 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: Datenbank erzeugenOffline Strategien für HTML5 Web Applikationen
  12. 12. function add(item) {db.transaction(function(tx) {tx.executeSql(INSERT INTO todo (todo) VALUES (?),[item.todo],onSuccess,onError);});}Web SQL Database: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationen
  13. 13. function remove(id) {db.transaction(function (tx) {tx.executeSql(DELETE FROM todo WHERE id = ?,[id],onSuccess,onError);});}Web SQL Database: Datensatz löschenOffline Strategien für HTML5 Web Applikationen
  14. 14. IndexedDBOffline Strategien für HTML5 Web ApplikationenKompromiss aus Web Storageund Web SQL Database.
  15. 15. 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: Objektspeicher erzeugenOffline Strategien für HTML5 Web Applikationen
  16. 16. 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 hinzufügenOffline Strategien für HTML5 Web Applikationen
  17. 17. 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: Datensatz löschenOffline Strategien für HTML5 Web Applikationen
  18. 18. File APIOffline Strategien für HTML5 Web ApplikationenFileReader API und FileWriter API
  19. 19. // request quota for persistent storewindow.webkitStorageInfo.requestQuota(PERSISTENT,size,function(grantedBytes) {window.requestFileSystem(PERSISTENT,grantedBytes,function(fs) {// @TODO: access filesystem}}}}File API: Quota anfordernOffline Strategien für HTML5 Web Applikationen
  20. 20. Offline Strategien für HTML5 Web Applikationen
  21. 21. 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ügenOffline Strategien für HTML5 Web Applikationen
  22. 22. DatensynchronisationOffline Strategien für HTML5 Web ApplikationenPouchDB, the JavaScriptDatabase that Syncs!
  23. 23. Browserunterstützung?Offline Strategien für HTML5 Web ApplikationenApp Cache Web Storage WebSQL IndexedDB File APIIE 10.0 8.0 10.0 10.0 -Firefox 11.0 11.0 11.0 11.0 19.0Chrome 18.0 18.0 18.0 18.0 18.0Safari 5.1 5.1 5.1 - -Opera 12.1 12.1 12.1 - -iOS Safari 3.2 3.2 3.2 - -Android 2.1 2.1 2.1 - -Quelle: http://caniuse.com
  24. 24. Vielen Dank!
  25. 25. VerweiseOffline Strategien für HTML5 Web ApplikationenQuellcode: http://github.com/bitExpert/html5-offlinePouchDB: http://pouchdb.com/Hoodie: http://hood.ie/
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×