Offline-Strategien für HTML5Web Applikationen - WMMRN12

Offline Strategien fürHTML5 (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

[email protected]

@shochdoerfer

Was heißt „offline“?


Was heißt „offline“?


Applikation

vs.

User-Generated Content

<! 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);

Application Cache für statische Ressourcen




CACHE MANIFEST# 20120916clock.htmlclock.cssclock.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>



// 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++;};

Application Cache Scripting...


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

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

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

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

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

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

Web Storage: localStorage



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

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

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

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

Web Storage: localStorage



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

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

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

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

Web Storage: sessionStorage


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.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 hinzufügen


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(); }}}

IndexedDB – Daten auslesen


File API


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 – Zugriff erfragen



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


File API – Datei erzeugen


function onInitFs(fs) { 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 – Datei auslesen


function onInitFs(fs) { fs.root.getDirectory('MyFolder', {create: true}, function(dirEntry) { // do stuff... }, errorHandler);}


File API – Verzeichnis anlegen


Vielen Dank!

Technology

Offline-Strategien für HTML5Web Applikationen - WMMRN12