Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Offline-Strategien für HTML5Web Applikationen - WMMRN12

1.229 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Offline-Strategien für HTML5Web Applikationen - WMMRN12

  1. 1. Offline Strategien fürHTML5 (Web) Applikationen Stephan Hochdörfer, bitExpert AG
  2. 2. 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
  3. 3. Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“?
  4. 4. Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“? Applikation vs. User-Generated Content
  5. 5. 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 sans­serif; } /* clock.js */ setTimeout(function () {     document.getElementById(clock).value = new Date(); }, 1000);
  6. 6. Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen CACHE MANIFEST # 2012­09­16 clock.html clock.css clock.js
  7. 7. 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>
  8. 8. 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++; };
  9. 9. Offline Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content...
  10. 10. Offline Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content... Web Storage, Web SQL Database, IndexedDB, File API
  11. 11. Offline Strategien für HTML5 (Web) Applikationen Web Storage
  12. 12. Offline Strategien für HTML5 (Web) Applikationen Web Storage: 2 Möglichkeiten localStorage vs. sessionStorage
  13. 13. 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));
  14. 14. 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]);
  15. 15. 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]);
  16. 16. Offline Strategien für HTML5 (Web) Applikationen Web SQL Database
  17. 17. 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) {          // couldnt read database          span.textContent = (unknown:  + e.message +  );     });   }); }
  18. 18. Offline Strategien für HTML5 (Web) Applikationen IndexedDB
  19. 19. 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);   }; };
  20. 20. 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();     }}}
  21. 21. Offline Strategien für HTML5 (Web) Applikationen File API
  22. 22. 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);
  23. 23. Offline Strategien für HTML5 (Web) Applikationen
  24. 24. 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);
  25. 25. 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);
  26. 26. 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);
  27. 27. Vielen Dank!

×