Anzeige
Check these out next
Offline-Strategien für HTML5Web Applikationen - WMMRN12
4. Dec 2012•0 gefällt mir•1,052 Aufrufe
1 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Technologie
Stephan HochdörferFolgen
Head of Technology um bitExpert AGAnzeige
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
- Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“?
- Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“? Applikation vs. User-Generated Content
- Offline Strategien für HTML5 (Web) Applikationen 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);
- Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen CACHE MANIFEST # 20120916 clock.html clock.css clock.js
- Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen <! 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>
- Offline Strategien für HTML5 (Web) Applikationen 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 Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content...
- Offline Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content... Web Storage, Web SQL Database, IndexedDB, File API
- Offline Strategien für HTML5 (Web) Applikationen Web Storage
- Offline Strategien für HTML5 (Web) Applikationen Web Storage: 2 Möglichkeiten localStorage vs. sessionStorage
- Offline Strategien für HTML5 (Web) Applikationen 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'));
- Offline Strategien für HTML5 (Web) Applikationen Web Storage: localStorage var myVar = 123; var myObj = {name: "Stephan"}; // 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']);
- Offline Strategien für HTML5 (Web) Applikationen Web Storage: sessionStorage var myVar = 123; var myObj = {name: "Stephan"}; // 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']);
- Offline Strategien für HTML5 (Web) Applikationen Web SQL Database
- Offline Strategien für HTML5 (Web) Applikationen 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 + ')'; }); }); }
- Offline Strategien für HTML5 (Web) Applikationen IndexedDB
- Offline Strategien für HTML5 (Web) Applikationen 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); }; };
- Offline Strategien für HTML5 (Web) Applikationen 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(); }}}
- Offline Strategien für HTML5 (Web) Applikationen File API
- Offline Strategien für HTML5 (Web) Applikationen 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);
- Offline Strategien für HTML5 (Web) Applikationen
- Offline Strategien für HTML5 (Web) Applikationen File API – Datei erzeugen 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);
- Offline Strategien für HTML5 (Web) Applikationen File API – Datei auslesen 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);
- Offline Strategien für HTML5 (Web) Applikationen File API – Verzeichnis anlegen function onInitFs(fs) { fs.root.getDirectory('MyFolder', {create: true}, function(dirEntry) { // do stuff... }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
- Vielen Dank!
Anzeige