Your SlideShare is downloading. ×
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Offline-Strategien für HTML5Web Applikationen - WMMRN12

783

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
783
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Offline Strategien fürHTML5 (Web) Applikationen Stephan Hochdörfer, bitExpert AG
  • 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. Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“?
  • 4. Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“? Applikation vs. User-Generated Content
  • 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. 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. 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. 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. Offline Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content...
  • 10. Offline Strategien für HTML5 (Web) Applikationen Offline Storage: User-Generated content... Web Storage, Web SQL Database, IndexedDB, File API
  • 11. Offline Strategien für HTML5 (Web) Applikationen Web Storage
  • 12. Offline Strategien für HTML5 (Web) Applikationen Web Storage: 2 Möglichkeiten localStorage vs. sessionStorage
  • 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. 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. 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. Offline Strategien für HTML5 (Web) Applikationen Web SQL Database
  • 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. Offline Strategien für HTML5 (Web) Applikationen IndexedDB
  • 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. 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. Offline Strategien für HTML5 (Web) Applikationen File API
  • 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. Offline Strategien für HTML5 (Web) Applikationen
  • 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. 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. 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. Vielen Dank!

×