Diese Präsentation wurde erfolgreich gemeldet.

Offline-Strategien für HTML5Web Applikationen - WMMRN12

1

Teilen

Wird geladen in …3
×
1 von 31
1 von 31

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Offline-Strategien für HTML5Web Applikationen - WMMRN12

  1. 1. Offline Strategien für HTML5 (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) {          // couldn't 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!

×