The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

  • 6,949 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,949
On Slideshare
0
From Embeds
0
Number of Embeds
19

Actions

Shares
Downloads
40
Comments
0
Likes
21

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. 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