O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Offline-Strategien für HTML5 Web Applikationen - wmka

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 33 Anúncio

Mais Conteúdo rRelacionado

Semelhante a Offline-Strategien für HTML5 Web Applikationen - wmka (20)

Mais de Stephan Hochdörfer (20)

Anúncio

Mais recentes (20)

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 Applikationen Application Cache vs. Offline Storage
  3. 3. App Cache für statische Ressourcen Offline Strategien für HTML5 Web Applikationen <!DOCTYPE html> <html lang="en"> HTML Page:
  4. 4. CACHE MANIFEST js/app.js css/app.css favicon.ico http://someotherdomain.com/image.png <!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):
  5. 5. App Cache – Was darf sollte gecacht werden? Offline Strategien für HTML5 Web Applikationen Ja:  Schriften  Startbild  Applikationsicon  Einstiegsseite  Fallbackseite Nein:  CSS  HTML  Javascript
  6. 6. Dynamische Daten lokal speichern... Offline Strategien für HTML5 Web Applikationen Web Storage, Web SQL Database, IndexedDB, File API
  7. 7. Web Storage: 2 Möglichkeiten Offline Strategien für HTML5 Web Applikationen localStorage vs. sessionStorage
  8. 8. function add(item) { try { // store object as string localStorage.setItem(item.id,               JSON.stringify(item)          ); } catch(ex) { console.log(ex); } } Web Storage: Datensatz hinzufügen Offline Strategien für HTML5 Web Applikationen
  9. 9. function remove (id) { try { localStorage.removeItem(id); } catch(ex) { console.log(ex); } } Web Storage: Datensatz löschen Offline Strategien für HTML5 Web Applikationen
  10. 10. Web SQL Database Offline Strategien für HTML5 Web Applikationen Eine lokale SQL Datenbank auf SQLite Basis.
  11. 11. // 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: Datenbank erzeugen Offline 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ügen Offline 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öschen Offline Strategien für HTML5 Web Applikationen
  14. 14. IndexedDB Offline Strategien für HTML5 Web Applikationen Kompromiss aus Web Storage und 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 erzeugen Offline 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ügen Offline 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öschen Offline Strategien für HTML5 Web Applikationen
  18. 18. File API Offline Strategien für HTML5 Web Applikationen FileReader API und FileWriter API
  19. 19. // request quota for persistent store window.webkitStorageInfo.requestQuota( PERSISTENT, size, function(grantedBytes) { window.requestFileSystem( PERSISTENT, grantedBytes, function(fs) { // @TODO: access filesystem } } } } File API: Quota anfordern Offline 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ügen Offline Strategien für HTML5 Web Applikationen
  22. 22. Datensynchronisation Offline Strategien für HTML5 Web Applikationen PouchDB, the JavaScript Database that Syncs!
  23. 23. Browserunterstützung? Offline Strategien für HTML5 Web Applikationen App Cache Web Storage WebSQL IndexedDB File API IE 10.0 8.0 10.0 10.0 - Firefox 11.0 11.0 11.0 11.0 19.0 Chrome 18.0 18.0 18.0 18.0 18.0 Safari 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. Verweise Offline Strategien für HTML5 Web Applikationen Quellcode: http://github.com/bitExpert/html5-offline PouchDB: http://pouchdb.com/ Hoodie: http://hood.ie/

×