2. Offline strategies for HTML5 web applications
About me
Stephan Hochdörfer
Head of IT at bitExpert AG, Germany
enjoying PHP since 1999
S.Hochdoerfer@bitExpert.de
@shochdoerfer
11. Offline strategies for HTML5 web applications
[...] we take the next step,
announcing 2014 as the target for
Recommendation.
Jeff Jaffe, Chief Executive Officer, World Wide Web Consortium
23. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
24. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
1. Files are always(!) served from the
application cache.
25. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
2. The application cache only updates
if the content of the manifest itself
has changed!
26. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
3. If any of the files listed in the
CACHE section can't be retrieved, the
entire cache will be disregarded.
27. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
4. If the manifest file itself can't be
retrieved, the cache will ignored!
28. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
5. Non-cached resources will not load
on a cached page!
29. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
6. The page needs to be reloaded,
otherwise the new resources do not
show up!
30. App Cache – Some gotchas!
Offline strategies for HTML5 web applications
7. To avoid the risk of caching
manifest files set expires headers!
31. App Cache – What to cache?
Offline strategies for HTML5 web applications
Yes:
Fonts
Splash image
App icon
Entry page
Fallback bootstrap
No:
CSS
HTML
Javascript
32. App Cache – What to cache?
Offline strategies for HTML5 web applications
Use the App Cache
only for „static content“.
33. The Data URI scheme
Offline strategies for HTML5 web applications
49. Web Storage: Don`t like method calls?
Offline strategies for HTML5 web applications
var value = "my value";
// method call
localStorage.setItem("key", value);
// Array accessor
localStorage[key] = value;
// Property accessor
localStorage.key = value;
60. Web SQL Database: Add item
Offline strategies for HTML5 web applications
function add(item) {
db.transaction(function(tx) {
tx.executeSql(
'INSERT INTO todo (todo) VALUES (?)',
[
item.todo
],
onSuccess,
onError
);
});
}
61. Web SQL Database: Modify item
Offline strategies for HTML5 web applications
function modify(item) {
db.transaction(function(tx) {
tx.executeSql(
'UPDATE todo SET todo = ? WHERE id = ?',
[
item.todo
item.id
],
onSuccess,
onError
);
});
}
62. Web SQL Database: Remove item
Offline strategies for HTML5 web applications
function remove(id) {
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM todo WHERE id = ?',
[
id
],
onSuccess,
onError
);
});
}
63. Web SQL Database: Read items
Offline strategies for HTML5 web applications
function read() {
db.transaction(function (tx) {
tx.executeSql(
'SELECT * FROM todo',
[],
onSuccess,
onError
);
});
}
64. Web SQL Database: Pro
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
65. Web SQL Database: Con
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
66. Web SQL Database: Con
Offline strategies for HTML5 web applications
SQLite is slooooow!
67. Web SQL Database: Con
Offline strategies for HTML5 web applications
The specification is no
longer part of HTML5!
69. IndexedDB
Offline strategies for HTML5 web applications
A nice compromise between Web
Storage and Web SQL Database giving
you the best of both worlds.
70. Web SQL Database vs. IndexedDB
Offline strategies for HTML5 web applications
Category Web SQL IndexedDB
Location Tables contain columns and
rows
objectStore contains Javascript objects and
keys
Query
Mechanism
SQL Cursor APIs, Key Range APIs, and
Application Code
Transaction Lock can happen on
databases, tables, or rows
on READ_WRITE
transactions
Lock can happen on database
VERSION_CHANGE transaction, on an
objectStore READ_ONLY and
READ_WRITE transactions.
Transaction
Commits
Transaction creation is
explicit. Default is to rollback
unless we call commit.
Transaction creation is explicit. Default is to
commit unless we call abort or there is an
error that is not caught.