Download as PDF, PPTX
![Setting
sessionStorage.setItem('version',5);
sessionStorage.version = 5;
sessionStorage['version'] = 5;](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-18-2048.jpg)
![Getting
sessionStorage.getItem('version');
sessionStorage.version;
sessionStorage['version'];](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-22-2048.jpg)
![tx.executeSql(
'INSERT INTO foo VALUES (?, ?)',
[id, userVariable]
);](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-69-2048.jpg)
![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);
}
}
);](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-70-2048.jpg)
![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);
}
}
);](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-71-2048.jpg)
![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);
}
}
);](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-72-2048.jpg)
![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);
}
}
);](https://image.slidesharecdn.com/webapps-without-the-web-100413111727-phpapp02/75/Webapps-without-the-web-73-2048.jpg)
Uploaded byRemy Sharp
Webapps without the web
The document discusses various HTML5 features and APIs for developing offline web applications, emphasizing offline storage options like web storage and web SQL databases. It explains the APIs, including their methods and usage for session and local storage, as well as the application cache for offline capabilities. Additionally, it touches on future APIs such as notifications and file management, offering a broad overview of the advancements in web application technology.
More Related Content
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Webapps without the web
- 1. Web Apps without the Web RemySharp / @rem
- 2.
- 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.
- 7.
- 8.
- 9. 1. Web Storage 2.Web SQL Databases 3. HTML5 offline applications 4. APIs of the future
- 10. Web Storage (cookies onsteroids)
- 11. Web Storage (cookies onsteroids)
- 12.
- 13. Two windows have accessto the same "session" cookie
- 14. Storage window based sessionStorage localStorage
- 15. Storage window based sessionStorage domain based localStorage
- 16.
- 17.
- 18.
- 20.
- 21.
- 22.
- 23. sessionStorage.version = 5; typeofsessionStorage.version; // ?
- 24. sessionStorage.version = 5; typeofsessionStorage.version; // ?
- 25.
- 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.
- 32. Just make itwork
- 33. Just make itwork 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 (cookieson steroids on steroids)
- 38. Web SQL Databases (cookieson steroids on steroids)
- 39. Web SQL DatabaseAPI 1. openDatabase 2. db.transaction 3. transaction.executeSql
- 40. openDatabase • Check forsupport
- 41. openDatabase • Check forsupport • Estimate db size
- 42. openDatabase • Check forsupport • Estimate db size • Store return var
- 43. openDatabase • Check forsupport • 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 Iopen the database without knowing the version?
- 48. Question: How do Iopen the database without knowing the version? You can't.
- 49. transaction • Container forrunning SQL
- 50. transaction • Container forrunning SQL • Queues executeSql
- 51. transaction • Container forrunning 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 forread & write
- 63. executeSql • Both forread & write • Injection protection
- 64. executeSql • Both forread & 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.
- 76.
- 77. Offline Apps • Applicationcache / manifest • Events: offline, online • navigator.onLine property
- 78.
- 79.
- 80.
- 81. Using a Manifest <!DOCTYPEhtml> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
- 82.
- 83. The Manifest 1. Serveas text/manifest, by adding to mime.types: text/cache-manifest manifest
- 84. The Manifest 2. Firstline must be: CACHE MANIFEST
- 85. The Manifest 3. Includingpage is implicitly included in the cache.
- 86. The Manifest 4. Twofuther namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
- 87. The Manifest 5. Includesome versioning to cache bust your manifest # version 16
- 88.
- 89. Browser: I havea 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 havea 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 havea 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 havea 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 havea 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 havea 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 havea 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 havea 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 havea 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 havea 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 theFuture
- 102.
- 104. if (webkitNotifications.checkPermission() ==0) { webkitNotifications.createNotification ➥ (profile_image_url, name, text).show(); }
- 105.
- 107.
- 108. Very new, collection of specifications
- 109.
- 110.
- 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 AppLauncher API PIM API File System API (calendar, contacts, tasks) Camera API
- 114. Message API AppLauncher API PIM API File System API (calendar, contacts, tasks) Camera API App Configuration API
- 115. Message API App LauncherAPI PIM API File System API(calendar, contacts, tasks) Communication Log API Camera API App Configuration API
- 116. Message API App LauncherAPI 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.