17. Application Caching involves
saving the application's core logic
and user-interface.
http://www.whatwg.org/specs/web-apps/current-
work/#applicationcache
18. It is enabled by a file .manifest
that declares which resources
have to be saved locally.
(theoretically limited to 5MB).
19. CACHE MANIFEST
# Explicitly cached entries
CACHE:
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://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.html
images/large/ images/offline.jpg
20. applicationCache can use events
to trigger application behavior
– window.applicationCache.onchecking = function(e) {
• log("Checking for application update");
–}
21. If you change a
resource and you
don't update (rev)
the .manifest the
browser may not
download the new file!
(yes! cached resources have priority on the online ones)
22. Data storage is about
capturing specific
data, or resources the
user has expressed
interest in.
http://www.flickr.com/photos/bfionline/2380398365/
24. Web Storage is the simpler
implementation of the Data
Storage paradigm.
http://dev.w3.org/html5/webstorage/
25. Web Storage is based on a
structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
26. Web Storage can save up to 5MB
but only as strings. So we have
to force a casting if needed.
var bar = parseInt(localStorage["bar"]);
27. Web Storage should be local
based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
28. sessionStorage mantains a
storage area that's available for
the duration of the web session.
Opening a new window/tab will create a new
session.
29. localStorage relies only on
client, so we have to track
changes and use storage.events
to sync server and client if
needed.
30. Web SQL Database is WAS just
an offline SQL implementation,
based on SQLite.
http://dev.w3.org/html5/webdatabase/
31. 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"); }
» );
});
32. Web SQL Database is not
supported by Microsoft and
Mozilla, instead it is on browsers
based on webkit.
33. But ...
Web SQL Database is dead!
as being dropped by W3C from 18/11/10
why bother more?
34. Web SQL Database is the only
database storage engine
working on mobile devices!
35. IndexedDB is a nice compromise
between Web Storage and Web
SQL Database.
http://www.w3.org/TR/IndexedDB/
36. IndexedDB allows to create an
index on a certain field stored in
a standard key->value mapping.
37. IndexedDB is promoted by all
browsers vendor, but is not yet
fully supported by all
Firefox 4, Chrome 11, have full implementation.
Safari 5.1 and IE 10 will have
38. FileAPI or File Storage will give
us a way to store a lot of data.
http://www.w3.org/TR/FileAPI/
39. File API includes FileReader and
FileWriter APIs.
Actually is supported by Chrome,
Firefox > 3.6, Safari > 5.1, Opera > 11.1.
40. First steps on
offline storage
development.
http://www.flickr.com/photos/45449692@N00/3161567381