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.
19. It is enabled by a file .appcache
that declares which resources
have to be saved locally.
(theoretically limited to 5MB).
20. CACHE MANIFEST
# Explicitly cached entries
CACHE:
index.html
stylesheet.css
images/logo.png
http://www.anothersite.com/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
.avi images/offline.jpg
21. applicationCache can use events
to trigger application behavior
window.applicationCache.onchecking = function(e) {
log("Checking for application update");
}
22. applicationCache or check if the
browser is online
If (window.navigator.onLine) {
log("Application is online");
}
24. As stated in the specs:
“window.navigator.onLine is inherently
unreliable. A computer can be connected
to a network without having Internet
access.”
25. If you change a
resource and you
don't update (rev)
the .appcache file
the browser may not
download the new file!
(yes! cached resources have priority on the online ones)
26. Data storage is about
capturing specific
data, or resources the
user has expressed
interest in.
http://qrurl.it/r/3n
28. Web Storage is the simpler
implementation of the Data
Storage paradigm.
http://qrurl.it/r/3h
29. Web Storage is based on a
structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
30. 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"]);
31. Web Storage should be local
based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
32. 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.
33. localStorage relies only on
client, so we have to track
changes and use storage.events
to sync server and client if
needed.
34. Web SQL Database is WAS just
an offline SQL implementation,
based on SQLite.
http://qrurl.it/r/3i
35. 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"); }
» );
});
36. Web SQL Database is not
supported by Microsoft and
Mozilla, it is on browsers based
on webkit.
37. But ...
Web SQL Database is dead!
as being dropped by W3C from 18/11/10
why bother more?
38. Web SQL
Database is the
only database
storage engine
that works on
mobile devices!
39. IndexedDB is a nice compromise
between Web Storage and Web
SQL Database.
http://qrurl.it/r/3j
40. IndexedDB allows to create an
index on a certain field stored in
a standard key->value mapping.
41. 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
42. FileAPI allows to manipulate file
objects, as well as
programmatically select them
and access their data.
http://qrurl.it/r/3k
43. File API includes FileReader and
FileWriter APIs.
Actually is supported by Chrome,
Firefox > 3.6, Safari > 5.1, Opera > 11.1.
44. First steps on
offline storage
development.
http://flic.kr/p/5PnRQr