Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

12,179 views

Published on

a quick overview on html5 offline strategies (applicationCache, localStorage, sessionStorage, indexedDB, localForage, firefoxOS DeviceStorage API)

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1url.pw/BxgBh ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

  1. THE HITCHHIKER’S GUIDE TO HTML5 offline strategies by david pichsenmeister
  2. why do I need an offline strategy?
  3. static vs dynamic resources
  4. static resources: application cache ● offline browsing ● speed ● resilience
  5. <html manifest="example.appcache"> ... </html> <html manifest="http://www.example.com/example.appcache"> ... </html> served with mime-type text/cache-manifest
  6. CACHE MANIFEST # 2013-10-31:v3 # resources to cache CACHE: index.html css/style.css scripts/app.js # offline.html will be displayed if the user is offline FALLBACK: img/ img/offline.jpg / /offline.html # All other resources (e.g. sites) require the user to be online. NETWORK: *
  7. var appCache = window.applicationCache; appCache.addEventListener('checking', function(e){}); appCache.addEventListener('noupdate', function(e){}); appCache.addEventListener('downloading', function(e){}); appCache.addEventListener('updateready', function(e){}); appCache.addEventListener('progress', function(e){}); appCache.addEventListener('cached', function(e){}); appCache.addEventListener('obsolete', function(e){}); appCache.addEventListener('error', function(e){});
  8. // Check if a new cache is available on page load. window.addEventListener( 'load', function(e) { window.applicationCache.addEventListener( 'updateready', function (e){ if (window.applicationCache.status == window. applicationCache.UPDATEREADY) { // Browser downloaded a new app cache. if (confirm('A new version is available. Load it?' { )) window.location.reload(); } } else { // Manifest didn't changed. Nothing new to server. } }, false); }, false);
  9. http://caniuse.com/#feat=offline-apps
  10. dynamic resources: ● ● ● ● ● web storage indexedDB localForage (by mozilla) webSQL (deprecated) device storage API (firefoxOS)
  11. local storage ● simple key-value store ● persistent ● only supports string-to-string mapping
  12. var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage window.localStorage.setItem('testObject', JSON. stringify(testObject)); // Retrieve the object from storage var retrievedObject = window.localStorage.getItem ('testObject'); console.log('retrievedObject: ', JSON.parse (retrievedObject));
  13. session storage ● same as local storage, but only available for the duration of the page session
  14. http://caniuse.com/#feat=namevalue-storage
  15. indexedDB ● key-object storage ● asynchronous ● object-oriented database
  16. var db; var request = window.indexedDB.open("MyTestDatabase"); request.onsuccess = function(event) { db = request.result; }; var objStore = db.createObjectStore("objects", {autoIncrement:true}); // e.g. otherObject = {name: “Bruce Wayne”} var objectStore = db.createObjectStore("otherObjects", {keyPath:"name"});
  17. var transaction = db.transaction(["objects"], "readwrite"); var objectStore = transaction.objectStore("objects"); var request = objectStore.add(object); request.onsuccess = function(event) { var key = event.target.result; } var request = objectStore.get(key); request.onsuccess = function(event) { console.log(request.result); } var request = objectStore.put(object); var request = objectStore.delete(key);
  18. http://caniuse.com/#feat=indexeddb
  19. localForage ● asynchronous ● “localStorage” - like API ● using primarily indexedDB, with localStorage fallback ● automatically converts the values to JSON
  20. // In localStorage, we would do: localStorage.setItem('key', JSON.stringify(value)); doSomethingElse(); // With localForage, we use callbacks: localForage.setItem('key', value, doSomethingElse);
  21. // Synchronous; slower! var value = JSON.parse(localStorage.getItem('key')); alert(value); // Async, fast, and non-blocking! localForage.getItem('key', alert);
  22. Device Storage API (only firefoxOS) ● ● ● ● accessing file system only for privileged and certified apps asynchronous slow!
  23. navigator.getDeviceStorage() ● ● ● ● ● apps music (needs valid audio mime type) pictures (needs valid image mime type) sdcard videos (needs valid video mime type) var pics = navigator.getDeviceStorage(‘pictures’);
  24. "permissions": { "device-storage:videos":{ "access": "readonly" }, "device-storage:pictures":{ "access": "readwrite" } }
  25. var sdcard = navigator.getDeviceStorage("sdcard"); var file = new Blob(["This is a text file."], type:" text/plain"}); var request = sdcard.addNamed(file, "my-file.txt"); request.onsuccess = function () { var name = this.result; console.log('wrote to sdcard"' + name); } // an error typically occur if a file with same name already exist request.onerror = function () { console.warn('Unable to write the file: ' + this.error); }
  26. var sdcard = navigator.getDeviceStorage("sdcard"); var request = sdcard.get("my-file.txt"); request.onsuccess = function () { var file = this.result; console.log('got file"' + file.name); } request.onerror = function () { console.warn('Unable to get the file: ' + this.error); }
  27. available space ● freeSpace() ● usedSpace() var request = sdcard.freeSpace(); request.onsuccess = function () { console.log(“available space in bytes:”+this.result) }
  28. resources http://appcachefacts.info/ http://www.html5rocks.com/en/features/storage https://github.com/mozilla/localforage https://developer.mozilla.org/en/docs/WebAPI/Device_Storage http://caniuse.com/ https://www.google. com/#q=the+answer+to+life+the+universe+and+everything
  29. thanks! feel free to add me on: .../3x14159265

×