The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

10,685 views
10,120 views

Published on

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

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,685
On SlideShare
0
From Embeds
0
Number of Embeds
4,107
Actions
Shares
0
Downloads
49
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

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

×