We'll look at how the HTML5 and related specifications allow us to develop applications that can survive outside of the web. Browsers now offer us simple storage and more complicated SQL based storage and also full offline support which means we can build our apps to be self sufficient when the user is disconnected. This talk will take you through the technology and walk you though some practical code.

1. Web Apps
without
the Web
Remy Sharp / @rem

2. What's what.

3. HTML5 "HTML5"

4. "HTML5"
Offline applications
HTML5
Offline events
Canvas
Video
Web Forms

5. MOAR!!!
"HTML5"
Geolocation
Web Workers
Web Sockets
Web SQL Databases
Web Storage
Offline applications
HTML5
Offline events
Canvas
Video
Web Forms

6. HTML5 Apps

7. "Offline Storage"

8. Offline cache
Data storage

9. 1. Web Storage
2. Web SQL Databases
3. HTML5 offline applications
4. APIs of the future

10. Web Storage
(cookies on steroids)

11. Web Storage
(cookies on steroids)

12. Cookies Suck.

13. Two windows have
access to the same
"session" cookie

14. Storage
window based sessionStorage
localStorage

15. Storage
window based sessionStorage
domain based localStorage

16. Setting
sessionStorage.setItem('version',5);

17. Setting
sessionStorage.setItem('version',5);
sessionStorage.version = 5;

18. Setting
sessionStorage.setItem('version',5);
sessionStorage.version = 5;
sessionStorage['version'] = 5;

20. Getting
sessionStorage.getItem('version');

21. Getting
sessionStorage.getItem('version');
sessionStorage.version;

22. Getting
sessionStorage.getItem('version');
sessionStorage.version;
sessionStorage['version'];

23. sessionStorage.version = 5;
typeof sessionStorage.version; // ?

24. sessionStorage.version = 5;
typeof sessionStorage.version; // ?

25. Values are strings

26. Values are strings
Work around: JSON
(and http://www.json.org/json2.js)

27. Complex Objects
var ss = sessionStorage,
user = { screen_name : ‘rem’,
rating : 11 };
ss.setItem(‘user’, JSON.stringify(user));
alert( JSON.parse(ss.getItem
(‘user’)).screen_name );

28. There's no security
protecting the API
// Safari debugger broken:
sessionStorage.setItem('setItem',12);

29. API
• setItem(key, value)
• getItem(key)
• removeItem(key)
• length
• key(index)
• clear()

30. What about
supporting old
browsers?

31. Pollyfilling

32. Just make it work

33. Just make it work
if (!localStorage || !sessionStorage) (function () {
var Storage = function (type) {
...
};
if (!localStorage) localStorage = new Storage('local');
if (!sessionStorage) sessionStorage = new Storage('session');
)();
http://gist.github.com/350433

36. Chrome's native
Web Sockets &
Flash is used to
fill the holes

37. Web SQL Databases
(cookies on steroids on steroids)

38. Web SQL Databases
(cookies on steroids on steroids)

39. Web SQL Database API
1. openDatabase
2. db.transaction
3. transaction.executeSql

40. openDatabase
• Check for support

41. openDatabase
• Check for support
• Estimate db size

42. openDatabase
• Check for support
• Estimate db size
• Store return var

43. openDatabase
• Check for support
• Estimate db size
• Store return var
• Forget versioning for now

44. if (!window.openDatabase) {
alert('No supported');
return;
}

45. var db = openDatabase(
'mydb', // name
'1.0', // version
'My First Database', // description
2 * 1024 * 1024 // size, 2Mb
);

46. var db = openDatabase(
'mydb', // name
'1.0', // version
'My First Database', // description
2 * 1024 * 1024 // size, 2Mb
);

47. Question:
How do I open the
database without
knowing the version?

48. Question:
How do I open the
database without
knowing the version?
You can't.

49. transaction
• Container for running SQL

50. transaction
• Container for running SQL
• Queues executeSql

51. transaction
• Container for running SQL
• Queues executeSql
• Rolls back on error

52. db.transaction(function (tx) {
tx.executeSql('CREATE TABLE foo (id unique, text)');
tx.executeSql('INSERT INTO foo VALUES (1, "foobar")');
});

53. db.transaction(function (tx) {
tx.executeSql('CREATE TABLE foo (id unique, text)');
tx.executeSql('INSERT INTO foo VALUES (1, "foobar")');
});

54. 3. select count(*)
Queue 2. drop table & (try) to insert
1. create table & insert
Database

55. 3. select count(*)
Queue 2. drop table & (try) to insert
1. create table & insert
Database

56. 3. select count(*)
Queue 2. drop table & (try) to insert
Database
1. create table & insert

57. 3. select count(*)
Queue
2. drop table & (try) to insert
Database
1. create table & insert

58. 3. select count(*)
Queue
2. drop table & (try) to insert
Database
1. create table & insert

59. 3. select count(*)
Queue
Database
1. create table & insert

60. Queue
3. select count(*)
Database
1. create table & insert

61. Queue
Database
1. create table & insert
3. select count(*)

62. executeSql
• Both for read & write

63. executeSql
• Both for read & write
• Injection protection

64. executeSql
• Both for read & write
• Injection protection
• Callback gives results

65. db.transaction(function (tx) {
tx.executeSql('SELECT * FROM foo');
});

66. db.transaction(function (tx) {
tx.executeSql('SELECT * FROM foo');
});

67. db.transaction(function (tx) {
tx.executeSql('SELECT * FROM foo');
});

68. tx.executeSql(
'INSERT INTO foo VALUES (1, "foo")'
);

69. tx.executeSql(
'INSERT INTO foo VALUES (?, ?)',
[id, userVariable]
);

70. tx.executeSql(
'SELECT * FROM foo',
[],
function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
}
);

71. tx.executeSql(
'SELECT * FROM foo',
[],
function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
}
);

72. tx.executeSql(
'SELECT * FROM foo',
[],
function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
}
);

73. tx.executeSql(
'SELECT * FROM foo',
[],
function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
}
);

75. Offline

76. Offline

77. Offline Apps
• Application cache / manifest
• Events: offline, online
• navigator.onLine property

78. navigator.onLine

79. http://icanhaz.com/rubiks

80. http://icanhaz.com/rubiks

81. Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>

82. my.manifest
CACHE MANIFEST
app.html
css/style.css
js/app.js
#version 13

83. The Manifest
1. Serve as text/manifest, by
adding to mime.types:
text/cache-manifest manifest

84. The Manifest
2. First line must be:
CACHE MANIFEST

85. The Manifest
3. Including page is implicitly
included in the cache.

86. The Manifest
4. Two futher namespaces:
NETWORK & FALLBACK
FALLBACK:
/ offline.html

87. The Manifest
5. Include some versioning to
cache bust your manifest
# version 16

88. The process

89. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

90. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

91. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

92. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

93. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

94. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

95. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

96. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

97. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

98. Browser: I have a
Problem: serve all manifest, cache
Browser: request Server:
assets
Change of content
requires 2 refreshes
Server: serve
Browser:
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

99. document.body.onOnline =
function () {
// fire an update to the cache
applicationCache.update();
};

100. document.body.onOnline =
function () {
// fire an update to the cache
applicationCache.update();
};
applicationCache.onUpdateReady =
function () {
applicationCache.swapCache();
notice('reload');
};

101. APIs of the Future

102. Notification API

104. if (webkitNotifications.checkPermission() == 0) {
webkitNotifications.createNotification
➥ (profile_image_url, name, text).show();
}

105. File API

107. Device API

108. Very new, collection
of specifications

109. Camera API

110. Message API
Camera API

111. Message API
PIM API
(calendar, contacts, tasks)
Camera API

112. Message API
PIM API
File System API (calendar, contacts, tasks)
Camera API

113. Message API
App Launcher API
PIM API
File System API (calendar, contacts, tasks)
Camera API

114. Message API
App Launcher API
PIM API
File System API (calendar, contacts, tasks)
Camera API
App Configuration API

115. Message API
App Launcher API
PIM API
File System API(calendar, contacts, tasks)
Communication Log API
Camera API
App Configuration API

116. Message API
App Launcher API
PIM API
Gallery API
File System API(calendar, contacts, tasks)
Communication Log API
Camera API
App Configuration API

117. Notifications API
Message API
App Launcher API
PIM API
Gallery API
File System API(calendar, contacts, tasks)
Communication Log API
Camera API
App Configuration API

118. Notifications API
-
Message API
I
P c!
App Launcher API
A ti
File System API
PIM API
Gallery API
(calendar, contacts, tasks)
s
Communication Log API
ta Camera API
App Configuration API

119. html5demos.com
introducinghtml5.com
@rem
remy@leftlogic.com