The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)
Upcoming SlideShare
Loading in...5
×
 

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS)

on

  • 6,850 views

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)

Statistics

Views

Total Views
6,850
Views on SlideShare
4,549
Embed Views
2,301

Actions

Likes
19
Downloads
37
Comments
0

16 Embeds 2,301

http://storify.com 1351
http://www.pichsenmeister.com 397
http://3x14159265.tumblr.com 312
http://localhost 154
http://www.iskool.me 40
http://glasnevinarea.blogspot.com 17
http://glasnevinarea.blogspot.ie 10
https://drive.jolicloud.com 5
http://www.google.com 4
http://www.google.at 3
http://www.linkedin.com 2
http://vallalkozasindito.hu 2
http://iskool.me 1
https://twitter.com 1
http://assets.txmblr.com 1
http://ussvirtual.uss.edu.pe 1
More...

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

The Hitchhikers Guide To Html5 Offline Strategies (+firefoxOS) Presentation 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