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

Offline-Strategien für HTML5Web Applikationen - WMMRN12

on

  • 1,103 views

 

Statistics

Views

Total Views
1,103
Views on SlideShare
1,058
Embed Views
45

Actions

Likes
1
Downloads
3
Comments
0

2 Embeds 45

https://twitter.com 33
http://lanyrd.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Offline-Strategien für HTML5Web Applikationen - WMMRN12 Offline-Strategien für HTML5Web Applikationen - WMMRN12 Presentation Transcript

  • 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 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 sans­serif; } /* 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 # 2012­09­16 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) {          // couldnt 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!