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

Offline-Strategien für HTML5 Web Applikationen - wmka

on

  • 1,300 views

 

Statistics

Views

Total Views
1,300
Views on SlideShare
1,296
Embed Views
4

Actions

Likes
2
Downloads
4
Comments
0

2 Embeds 4

http://lanyrd.com 3
http://translate.googleusercontent.com 1

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 - wmka Offline-Strategien für HTML5 Web Applikationen - wmka Presentation Transcript

  • Offline Strategien für HTML5 Web ApplikationenÜber mich Stephan Hochdörfer Head of IT der bitExpert AG, Mannheim S.Hochdoerfer@bitExpert.de @shochdoerfer
  • 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="cache.manifest">App Cache für statische RessourcenOffline Strategien für HTML5 Web ApplikationenHTML Page:cache.manifest (Content-Type: text/cache-manifest):
  • App Cache – Was darf sollte gecacht werden?Offline Strategien für HTML5 Web ApplikationenJa:SchriftenStartbildApplikationsiconEinstiegsseiteFallbackseiteNein:CSSHTMLJavascript
  • Dynamische Daten lokal speichern...Offline Strategien für HTML5 Web ApplikationenWeb Storage, Web SQL Database,IndexedDB, File API
  • 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)         );}catch(ex) {console.log(ex);}}Web Storage: Datensatz hinzufügenOffline Strategien für HTML5 Web Applikationen
  • function remove (id) {try {localStorage.removeItem(id);}catch(ex) {console.log(ex);}}Web Storage: Datensatz löschenOffline Strategien für HTML5 Web Applikationen
  • 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(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
  • 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
  • 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
  • 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 = 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
  • 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
  • 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
  • File APIOffline Strategien für HTML5 Web ApplikationenFileReader API und FileWriter API
  • // 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
  • 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ügenOffline Strategien für HTML5 Web Applikationen
  • 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 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
  • Vielen Dank!
  • VerweiseOffline Strategien für HTML5 Web ApplikationenQuellcode: http://github.com/bitExpert/html5-offlinePouchDB: http://pouchdb.com/Hoodie: http://hood.ie/