Post on 10-May-2015
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“?
Offline Strategien für HTML5 (Web) Applikationen
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
Offline Strategien für HTML5 (Web) Applikationen
Application Cache für statische Ressourcen
Offline Strategien für HTML5 (Web) Applikationen
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>
Application Cache für statische Ressourcen
Offline Strategien für HTML5 (Web) Applikationen
// 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 Strategien für HTML5 (Web) Applikationen
Offline Storage: User-Generated content...
Offline Strategien für HTML5 (Web) Applikationen
Web Storage, Web SQL Database, IndexedDB, File API
Web Storage: 2 Möglichkeiten
Offline Strategien für HTML5 (Web) Applikationen
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
Offline Strategien für HTML5 (Web) Applikationen
var myVar = 123;var myObj = {name: "Stephan"};
// 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
Offline Strategien für HTML5 (Web) Applikationen
var myVar = 123;var myObj = {name: "Stephan"};
// 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
Offline Strategien für HTML5 (Web) Applikationen
Web SQL Database
Offline Strategien für HTML5 (Web) Applikationen
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.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
Offline Strategien für HTML5 (Web) Applikationen
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
Offline Strategien für HTML5 (Web) Applikationen
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
Offline Strategien für HTML5 (Web) Applikationen
function onInitFs(fs) { fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) { // fileEntry.name == 'log.txt' // fileEntry.fullPath == '/log.txt' }, errorHandler);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
File API – Datei erzeugen
Offline Strategien für HTML5 (Web) Applikationen
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);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
File API – Datei auslesen
Offline Strategien für HTML5 (Web) Applikationen
function onInitFs(fs) { fs.root.getDirectory('MyFolder', {create: true}, function(dirEntry) { // do stuff... }, errorHandler);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
File API – Verzeichnis anlegen
Offline Strategien für HTML5 (Web) Applikationen