Offline Strategien fürHTML5 (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 Entwickle...
Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“?
Offline Strategien für HTML5 (Web) Applikationen Was heißt „offline“?                      Applikation                    ...
Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen <!­­ clock.html ­­> <!DOCTYPE ...
Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen CACHE MANIFEST # 2012­09­16 cl...
Offline Strategien für HTML5 (Web) Applikationen Application Cache für statische Ressourcen <!­­ clock.html ­­> <!DOCTYPE ...
Offline Strategien für HTML5 (Web) Applikationen Application Cache Scripting... // events fired by window.applicationCache...
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 Datab...
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"};...
Offline Strategien für HTML5 (Web) Applikationen Web Storage: localStorage var myVar = 123; var myObj = {name: "Stephan"};...
Offline Strategien für HTML5 (Web) Applikationen Web Storage: sessionStorage var myVar = 123; var myObj = {name: "Stephan"...
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 openDa...
Offline Strategien für HTML5 (Web) Applikationen IndexedDB
Offline Strategien für HTML5 (Web) Applikationen IndexedDB – Daten hinzufügen indexedDB.addTodo = function() {   var db = ...
Offline Strategien für HTML5 (Web) Applikationen IndexedDB – Daten auslesen function show() {   var request = window.index...
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 ...
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.t...
Offline Strategien für HTML5 (Web) Applikationen File API – Datei auslesen function onInitFs(fs) {   fs.root.getFile(log.t...
Offline Strategien für HTML5 (Web) Applikationen File API – Verzeichnis anlegen function onInitFs(fs) {    fs.root.getDire...
Vielen Dank!
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Offline-Strategien für HTML5Web Applikationen - WMMRN12
Upcoming SlideShare
Loading in...5
×

Offline-Strategien für HTML5Web Applikationen - WMMRN12

842

Published on

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

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

No notes for slide

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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×