Offline-Strategien für HTML5Web Applikationen - WMMRN12

Offline Strategien für
HTML5 (Web) Applikationen
Stephan Hochdörfer, bitExpert AG

Offline Strategien für HTML5 (Web) Applikationen

Über mich

 Stephan Hochdörfer, bitExpert AG

 Head of IT

 PHP Entwickler seit 1999

 S.Hochdoerfer@bitExpert.de

 @shochdoerfer


Was heißt „offline“?


Was heißt „offline“?

Applikation

vs.

User-Generated Content


Application Cache für statische Ressourcen
<! clock.html >
<!DOCTYPE HTML>
<html>
<head>
  <title>Clock</title>
  <script src="clock.js"></script>
  <link rel="stylesheet" href="clock.css">
</head>
<body>
  <p>The time is: <output id="clock"></output></p>
</body>
</html>

/* clock.css */
output { font: 2em sansserif; }

/* clock.js */
setTimeout(function () {
    document.getElementById('clock').value = new Date();
}, 1000);


CACHE MANIFEST
# 20120916
clock.html
clock.css
clock.js


<! clock.html >
<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head>
  <title>Clock</title>
  <script src="clock.js"></script>
  <link rel="stylesheet" href="clock.css">
</head>
<body>
  <p>The time is: <output id="clock"></output></p>
</body>
</html>


Application Cache Scripting...
// 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++;
};


Offline Storage: User-Generated content...


Offline Storage: User-Generated content...

Web Storage, Web SQL Database,
IndexedDB, File API


Web Storage


Web Storage: 2 Möglichkeiten

localStorage vs. sessionStorage


Web Storage: localStorage
var myVar = 123;
var myObj = {name: "Stephan"};

// write scalar value to localStorage
localStorage.setItem('myVar', myVar);

// read scalar value from localStorage
myVar = localStorage.getItem('myVar');

// write object to localStorage
localStorage.setItem('myObj', JSON.stringify(myObj));

// read object from localStorage
myObj = JSON.parse(localStorage.getItem('myObj'));


Web Storage: localStorage
var myVar = 123;

// write scalar value to localStorage
localStorage['myVar'] = myVar;

// read scalar value from localStorage
myVar = localStorage['myVar'];

// write object to localStorage
localStorage['myObj'] = JSON.stringify(myObj);

// read object from localStorage
myObj = JSON.parse(localStorage['myObj']);


Web Storage: sessionStorage
var myVar = 123;

// write scalar value to sessionStorage
sessionStorage['myVar'] = myVar;

// read scalar value from sessionStorage
myVar = sessionStorage['myVar'];

// write object to sessionStorage
sessionStorage['myObj'] = JSON.stringify(myObj);

// read object from sessionStorage
myObj = JSON.parse(sessionStorage['myObj']);


Web SQL Database


Web SQL Database
function prepareDatabase(ready, error) {
  return openDatabase('documents', '1.0',
    'Offline document storage', 5*1024*1024, function
(db) {
    db.changeVersion('', '1.0', function (t) {
      t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
  });
}

function showDocCount(db, span) {
  db.readTransaction(function (t) {
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [],
      function (t, r) {
         span.textContent = r.rows[0].c;
      }, function (t, e) {
         // couldn't read database
         span.textContent = '(unknown: ' + e.message +
')';
    });
  });
}


IndexedDB


IndexedDB – Daten hinzufügen
indexedDB.addTodo = function() {
  var db = todoDB.indexedDB.db;
  var trans = db.transaction(['todo'],
IDBTransaction.READ_WRITE);
  var store = trans.objectStore('todo');

  var data = {
    "text": todoText,
    "timeStamp": new Date().getTime()
  };

  var request = store.put(data);
  request.onsuccess = function(e) {
    todoDB.indexedDB.getAllTodoItems();
  };
  request.onerror = function(e) {
    console.log("Failed adding items due to: ", e);
  };
};


IndexedDB – Daten auslesen
function show() {
  var request = window.indexedDB.open("todos");
  request.onsuccess = function(event) {
    var db = todoDB.indexedDB.db;
    var trans = db.transaction(["todo"],
        IDBTransaction.READ_ONLY);
    var request = trans.objectStore("todo").openCursor();
    var ul = document.createElement("ul");

    request.onsuccess = function(event) {
      var cursor = request.result || event.result;
      // If cursor is null, enumeration completed
      if(!cursor) {
        document.getElementById("todos").appendChild(ul);
        return;
      }

      var li = document.createElement("li");
      li.textContent = cursor.value.text;
      ul.appendChild(li);
      cursor.continue();
    }}}


File API


File API – Zugriff erfragen
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);
}

function errorHandler(e) {
console.log('Error: ' + e.code);
}

window.requestFileSystem(window.TEMPORARY, 5*1024*1024
/*5MB*/, onInitFs, errorHandler);


File API – Datei erzeugen
  fs.root.getFile('log.txt',
  {create: true, exclusive: true},
  function(fileEntry) {
    // fileEntry.name == 'log.txt'
    // fileEntry.fullPath == '/log.txt'
  }, errorHandler);
}



File API – Datei auslesen
  fs.root.getFile('log.txt', {},
  function(fileEntry) {
    fileEntry.file(function(file) {
       var reader = new FileReader();

       reader.onloadend = function(e) {
         var txtArea   =
              document.createElement('textarea');
         txtArea.value = this.result;
         document.body.appendChild(txtArea);
       };
       reader.readAsText(file);
    }, errorHandler);
  }, errorHandler);
}



File API – Verzeichnis anlegen
   fs.root.getDirectory('MyFolder', {create: true},
   function(dirEntry) {
    // do stuff...
    }, errorHandler);
}


Offline-Strategien für HTML5Web Applikationen - WMMRN12

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Stephan Hochdörfer

Mehr von Stephan Hochdörfer (20)

Offline-Strategien für HTML5Web Applikationen - WMMRN12