Your browser, my storagea new approach on data storing   (v.1.3)Francesco Fulloneff AT ideato.it
Who am IFrancesco Fullone aka Fullo- PHP developer since 1999-               President-         and     Evangelist- CEO @-...
What we want is a lot of storage space, onthe client, that persists beyond a pagerefresh and isn’t transmitted to the serv...
Persistent local storage is one of     the areas where client  applications traditionally win    against web applications.
A jump in the past
http://qrurl.it/r/3l  Cookies were introduced inHTTP/1.0, limited to only 20 per    domain and 4KB each.
Cookies are sent to                        and from client at                         any connection.http://qrurl.it/r/3m
Microsoft with Internet Explorer 6   introduced dHTML and theuserData API to store up to 64KB             of data
Mozilla introduced with Firefox 2the DOM Storage API, it will then     know as Web Storage.
In 2002 Adobe                          created the                    Flash Cookies aka  “Local Shared Objects” for Flash ...
With Flash 8, in 2006, Adobe introduced the  ExternalInterface to allow Js to accessto the stored resources.
Between 2005 and 2007 dojox.storage was written by  Brad Neuberg as a Js->Flashbridge to manage bigger chunks           of...
Google created Gears in 2007, that introduced a databaseparadigm (based on SQLite) to  solve the storage problem.
BUT
All these storage systems had  different APIs, a commonplatform is needed by all the       browser vendors.
The two approaches of storing:      Application Cache       Offline storage
Application Caching involvessaving the applications core logic       and user-interface.           http://qrurl.it/r/3g
It is enabled by a file .appcache  that declares which resources     have to be saved locally.       (theoretically limite...
CACHE MANIFEST# Explicitly cached entriesCACHE:index.htmlstylesheet.cssimages/logo.pnghttp://www.anothersite.com/scripts/m...
applicationCache can use events to trigger application behavior window.applicationCache.onchecking = function(e) {     log...
applicationCache or check if the        browser is online  If (window.navigator.onLine) {      log("Application is online"...
Chrome/Chromium doesnt supportwindow.navigator.onLine attribute and...   It doesnt have a real offline mode!
As stated in the specs:“window.navigator.onLine is inherentlyunreliable. A computer can be connected    to a network witho...
If you change a                       resource and you                     dont update (rev)                     the .appc...
Data storage is about                         capturing specific                       data, or resources the             ...
Approaches toData Storage
Web Storage is the simplerimplementation of the Data    Storage paradigm.       http://qrurl.it/r/3h
Web Storage is based on astructure of key-value pairs like     any JavaScript object.localStorage.setItem("bar", foo);
Web Storage can save up to 5MBbut only as strings. So we have to force a casting if needed.var bar = parseInt(localStorage...
Web Storage should be local based or session based. var bar = localStorage["bar"];var foo = sessionStorage["foo"];
sessionStorage mantains astorage area thats available forthe duration of the web session. Opening a new window/tab will cr...
localStorage relies only on  client, so we have to trackchanges and use storage.events  to sync server and client if      ...
Web SQL Database is WAS justan offline SQL implementation,        based on SQLite.         http://qrurl.it/r/3i
this.db = openDatabase(geomood, 1.0, Geo, 8192);this.db.transaction(function(tx) {  tx.executeSql("create table if not exi...
Web SQL Database is not supported by Microsoft andMozilla, it is on browsers based           on webkit.
But ...Web SQL Database is dead!  as being dropped by W3C from 18/11/10             why bother more?
Web SQLDatabase is theonly databasestorage engine that works onmobile devices!
IndexedDB is a nice compromise between Web Storage and Web        SQL Database.         http://qrurl.it/r/3j
IndexedDB allows to create anindex on a certain field stored in a standard key->value mapping.
IndexedDB is promoted by allbrowsers vendor, but is not yet    fully supported by all  Firefox 4, Chrome 11, have full imp...
Using IndexedDB/1var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB ||...
Using IndexedDB/2var dbVersion = 1;var request = indexedDB.open("MyDb", dbVersion);request.onsuccess = function (event) { ...
Using IndexedDB/3var transaction = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = transaction.objectStore...
Using IndexedDB/4  // Get everything in the store;var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest=store.openCur...
FileAPI allows to manipulate file       objects, as well as  programmatically select them      and access their data.     ...
File API includes FileReader and         FileWriter APIs.       Actually is supported by Chrome,    Firefox > 3.6, Safari ...
filer.jshttp://qrurl.it/r/c3webFS.jshttp://qrurl.it/r/c4
First steps on                          offline storage                          development.http://flic.kr/p/5PnRQr
Storages Status/1
Storages Status/2
Storages Status/3
Detect if the storing feature is supported by the browser (withmodernizr), otherwise degradate       to something else.   ...
Use libraries that manage data             for you       (ie. storagejs, lawnchair)
http://qrurl.it/r/3oProtect against lost data,  sync automatically.
http://qrurl.it/r/3p                Automatically detect when                    users are online.
Do not exceed in storing data,you can store binary data base64  encoded but remember the    pitfalls in performance.
Avoid race conditions.If possible use WebSQL to use its     transactions features.
use local storage to help yourapplication to become faster.
basket.jshttp://qrurl.it/r/c2
basket    .require(jquery.js)    .require(underscore.js)    .require(app.js).wait(function(){    • /* do something cool */...
?
jsDay + phpDay 2012 16-19 Maggio 2012 Verona     www.phpday.it
Francesco Fullone    ff@ideato.it       @fullo  via Quinto Bucci 205   47023 Cesena (FC)    info AT ideato.it     www.idea...
your browser, my storage
your browser, my storage
Upcoming SlideShare
Loading in...5
×

your browser, my storage

3,068

Published on

Complex applications need a persistent database to store, search and join data: till now a dedicated server was needed to do this, and no offline usage of the app was possible. With the introduction of HTML5 and the concept of Web Databases, we don’t need an external server anymore: everything is stored within the user browser and thus the web app can be used offline as well as online.

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

No Downloads
Views
Total Views
3,068
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • - Chrome you can change the cache limits with – disk-cache-size=N - Opera crashes if the cache is filled chrome: about:appcache-internals firefox: about:cache
  • window.applicationCache.onchecking = function(e) { log("Checking for application update"); } window.applicationCache.onnoupdate = function(e) { log("No application update found"); } window.applicationCache.onupdateready = function(e) { log("Application update ready"); //Now connect the browser to use the new cache window.applicationCache.swapCache(); } window.applicationCache.onobsolete = function(e) { log("Application obsolete"); } window.applicationCache.ondownloading = function(e) { log("Downloading application update"); } window.applicationCache.oncached = function(e) { log("Application cached"); } window.applicationCache.onerror = function(e) { log("Application cache error"); } window.applicationCache.onprogress = function(e) { log("Application Cache progress"); }
  • window.applicationCache.onchecking = function(e) { log("Checking for application update"); } window.applicationCache.onnoupdate = function(e) { log("No application update found"); } window.applicationCache.onupdateready = function(e) { log("Application update ready"); //Now connect the browser to use the new cache window.applicationCache.swapCache(); } window.applicationCache.onobsolete = function(e) { log("Application obsolete"); } window.applicationCache.ondownloading = function(e) { log("Downloading application update"); } window.applicationCache.oncached = function(e) { log("Application cached"); } window.applicationCache.onerror = function(e) { log("Application cache error"); } window.applicationCache.onprogress = function(e) { log("Application Cache progress"); }
  • your browser, my storage

    1. 1. Your browser, my storagea new approach on data storing (v.1.3)Francesco Fulloneff AT ideato.it
    2. 2. Who am IFrancesco Fullone aka Fullo- PHP developer since 1999- President- and Evangelist- CEO @- founder @- Nerd and geek
    3. 3. What we want is a lot of storage space, onthe client, that persists beyond a pagerefresh and isn’t transmitted to the server. ~ M. Pilgrim
    4. 4. Persistent local storage is one of the areas where client applications traditionally win against web applications.
    5. 5. A jump in the past
    6. 6. http://qrurl.it/r/3l Cookies were introduced inHTTP/1.0, limited to only 20 per domain and 4KB each.
    7. 7. Cookies are sent to and from client at any connection.http://qrurl.it/r/3m
    8. 8. Microsoft with Internet Explorer 6 introduced dHTML and theuserData API to store up to 64KB of data
    9. 9. Mozilla introduced with Firefox 2the DOM Storage API, it will then know as Web Storage.
    10. 10. In 2002 Adobe created the Flash Cookies aka “Local Shared Objects” for Flash 6Data storage increased to 100KB but it was difficult to be used
    11. 11. With Flash 8, in 2006, Adobe introduced the ExternalInterface to allow Js to accessto the stored resources.
    12. 12. Between 2005 and 2007 dojox.storage was written by Brad Neuberg as a Js->Flashbridge to manage bigger chunks of data (with user prompt over 1MB).
    13. 13. Google created Gears in 2007, that introduced a databaseparadigm (based on SQLite) to solve the storage problem.
    14. 14. BUT
    15. 15. All these storage systems had different APIs, a commonplatform is needed by all the browser vendors.
    16. 16. The two approaches of storing: Application Cache Offline storage
    17. 17. Application Caching involvessaving the applications core logic and user-interface. http://qrurl.it/r/3g
    18. 18. It is enabled by a file .appcache that declares which resources have to be saved locally. (theoretically limited to 5MB).
    19. 19. CACHE MANIFEST# Explicitly cached entriesCACHE:index.htmlstylesheet.cssimages/logo.pnghttp://www.anothersite.com/scripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapihttp://api.twitter.com# static.html will be served if main.php is inaccessible# offline.jpg will be served in place of all images in images/large/FALLBACK:/main.php /static.htmlimages/large/ images/offline.jpg.avi images/offline.jpg
    20. 20. applicationCache can use events to trigger application behavior window.applicationCache.onchecking = function(e) { log("Checking for application update"); }
    21. 21. applicationCache or check if the browser is online If (window.navigator.onLine) { log("Application is online"); }
    22. 22. Chrome/Chromium doesnt supportwindow.navigator.onLine attribute and... It doesnt have a real offline mode!
    23. 23. As stated in the specs:“window.navigator.onLine is inherentlyunreliable. A computer can be connected to a network without having Internet access.”
    24. 24. If you change a resource and you dont update (rev) the .appcache file the browser may not download the new file!(yes! cached resources have priority on the online ones)
    25. 25. Data storage is about capturing specific data, or resources the user has expressed interest in.http://qrurl.it/r/3n
    26. 26. Approaches toData Storage
    27. 27. Web Storage is the simplerimplementation of the Data Storage paradigm. http://qrurl.it/r/3h
    28. 28. Web Storage is based on astructure of key-value pairs like any JavaScript object.localStorage.setItem("bar", foo);
    29. 29. Web Storage can save up to 5MBbut only as strings. So we have to force a casting if needed.var bar = parseInt(localStorage["bar"]);
    30. 30. Web Storage should be local based or session based. var bar = localStorage["bar"];var foo = sessionStorage["foo"];
    31. 31. sessionStorage mantains astorage area thats available forthe duration of the web session. Opening a new window/tab will create a new session.
    32. 32. localStorage relies only on client, so we have to trackchanges and use storage.events to sync server and client if needed.
    33. 33. Web SQL Database is WAS justan offline SQL implementation, based on SQLite. http://qrurl.it/r/3i
    34. 34. this.db = openDatabase(geomood, 1.0, Geo, 8192);this.db.transaction(function(tx) { tx.executeSql("create table if not exists checkins(id integer primary key asc, time integer, latitude float, longitude float, mood string)", [], function() { console.log("siucc"); } » );});
    35. 35. Web SQL Database is not supported by Microsoft andMozilla, it is on browsers based on webkit.
    36. 36. But ...Web SQL Database is dead! as being dropped by W3C from 18/11/10 why bother more?
    37. 37. Web SQLDatabase is theonly databasestorage engine that works onmobile devices!
    38. 38. IndexedDB is a nice compromise between Web Storage and Web SQL Database. http://qrurl.it/r/3j
    39. 39. IndexedDB allows to create anindex on a certain field stored in a standard key->value mapping.
    40. 40. IndexedDB is promoted by allbrowsers vendor, but is not yet fully supported by all Firefox 4, Chrome 11, have full implementation. Safari 5.1 and IE 10 will have
    41. 41. Using IndexedDB/1var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,    IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction;
    42. 42. Using IndexedDB/2var dbVersion = 1;var request = indexedDB.open("MyDb", dbVersion);request.onsuccess = function (event) {    console.log("creating/accessing IndexedDB db");    db = request.result;}
    43. 43. Using IndexedDB/3var transaction = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = transaction.objectStore("todo");var data = {  "text": “text to be saved”,  "timeStamp": new Date().getTime()};var put = store.put(data);
    44. 44. Using IndexedDB/4  // Get everything in the store;var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest=store.openCursor(keyRange);cursorRequest.onsuccess = function(e) {  var results = e.target.result;  if(!!results == false) return;  /* DO SOMETHING */  results.continue();};
    45. 45. FileAPI allows to manipulate file objects, as well as programmatically select them and access their data. http://qrurl.it/r/3k
    46. 46. File API includes FileReader and FileWriter APIs. Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.
    47. 47. filer.jshttp://qrurl.it/r/c3webFS.jshttp://qrurl.it/r/c4
    48. 48. First steps on offline storage development.http://flic.kr/p/5PnRQr
    49. 49. Storages Status/1
    50. 50. Storages Status/2
    51. 51. Storages Status/3
    52. 52. Detect if the storing feature is supported by the browser (withmodernizr), otherwise degradate to something else. (ie. dojox.storage)
    53. 53. Use libraries that manage data for you (ie. storagejs, lawnchair)
    54. 54. http://qrurl.it/r/3oProtect against lost data, sync automatically.
    55. 55. http://qrurl.it/r/3p Automatically detect when users are online.
    56. 56. Do not exceed in storing data,you can store binary data base64 encoded but remember the pitfalls in performance.
    57. 57. Avoid race conditions.If possible use WebSQL to use its transactions features.
    58. 58. use local storage to help yourapplication to become faster.
    59. 59. basket.jshttp://qrurl.it/r/c2
    60. 60. basket    .require(jquery.js)    .require(underscore.js)    .require(app.js).wait(function(){ • /* do something cool */ });
    61. 61. ?
    62. 62. jsDay + phpDay 2012 16-19 Maggio 2012 Verona www.phpday.it
    63. 63. Francesco Fullone ff@ideato.it @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×