offline strategies for html5 web applications - froscon8
DESCRIPTION
TRANSCRIPT
![Page 1: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/1.jpg)
Offline strategies for HTML5 web applicationsStephan Hochdörfer, bitExpert AG
![Page 2: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/2.jpg)
Offline strategies for HTML5 web applications
About me
Stephan Hochdörfer
Head of IT at bitExpert AG, Germany
enjoying PHP since 1999
@shochdoerfer
![Page 3: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/3.jpg)
Offline strategies for HTML5 web applications
Storing data on the client? Seriously?
![Page 4: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/4.jpg)
Offline strategies for HTML5 web applications
How did we solve these issues in the past?
![Page 5: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/5.jpg)
Offline strategies for HTML5 web applications
Cookies are tasty, but not awesome!
![Page 6: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/6.jpg)
Offline strategies for HTML5 web applications
IE DHTML behaviours, not sweet!
![Page 7: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/7.jpg)
Offline strategies for HTML5 web applications
Flash Cookies are yummie!
![Page 8: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/8.jpg)
Offline strategies for HTML5 web applications
Google Gears made it right. Sort of.
![Page 9: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/9.jpg)
Can I haz alternative?
Offline strategies for HTML5 web applications
![Page 10: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/10.jpg)
Offline strategies for HTML5 web applications
to the rescue!
![Page 11: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/11.jpg)
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
![Page 12: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/12.jpg)
Offline strategies for HTML5 web applications
![Page 13: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/13.jpg)
Offline strategies for HTML5 web applications
![Page 14: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/14.jpg)
What does „offline“ mean?
Offline strategies for HTML5 web applications
![Page 15: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/15.jpg)
What does „offline“ mean?
Offline strategies for HTML5 web applications
Application vs. Content
![Page 16: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/16.jpg)
What does „offline“ mean?
Offline strategies for HTML5 web applications
Application Cache vs. Offline Storage
![Page 17: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/17.jpg)
App Cache for caching static resources
Offline strategies for HTML5 web applications
HTML Page:
<!DOCTYPE html><html lang="en">
![Page 18: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/18.jpg)
CACHE MANIFEST
js/app.jscss/app.cssfavicon.icohttp://someotherdomain.com/image.png
<!DOCTYPE html><html lang="en" manifest="cache.manifest">
App Cache for caching static resources
Offline strategies for HTML5 web applications
HTML Page:
cache.manifest (served with Content-Type: text/cache-manifest):
![Page 19: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/19.jpg)
App Cache for caching static resources
Offline strategies for HTML5 web applications
CACHE MANIFEST# 2013-07-25
NETWORK:data.php
CACHE:/main/home/main/app.js/settings/home/settings/app.jshttp://myhost/logo.pnghttp://myhost/check.pnghttp://myhost/cross.png
![Page 20: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/20.jpg)
App Cache for caching static resources
Offline strategies for HTML5 web applications
CACHE MANIFEST# 2013-07-25
FALLBACK:/ /offline.html
NETWORK:*
![Page 21: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/21.jpg)
App Cache Scripting
Offline strategies for HTML5 web applications
// events fired by window.applicationCachewindow.applicationCache.onchecking = function(e) {log("Checking for updates");}window.applicationCache.onnoupdate = function(e) {log("No updates");}window.applicationCache.onupdateready = function(e) {log("Update ready");}window.applicationCache.onobsolete = function(e) {log("Obsolete");}window.applicationCache.ondownloading = function(e) {log("Downloading");}window.applicationCache.oncached = function(e) {log("Cached");}window.applicationCache.onerror = function(e) {log("Error");}
// Log each filewindow.applicationCache.onprogress = function(e) { log("Progress: downloaded file " + counter); counter++;};
![Page 22: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/22.jpg)
App Cache Scripting
Offline strategies for HTML5 web applications
// Check if a new cache is available on page load.window.addEventListener('load', function(e) { window.applicationCache.addEventListener('updateready', function(e) {
if(window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Browser downloaded a new app cache. // Swap it in and reload the page window.applicationCache.swapCache(); if (confirm('New version is available. Load it?)) { window.location.reload(); } } else { // Manifest didn't change... } }, false);
}, false);
![Page 23: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/23.jpg)
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
![Page 24: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/24.jpg)
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
1. Files are always(!) served from the application cache.
![Page 25: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/25.jpg)
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!
![Page 26: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/26.jpg)
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.
![Page 27: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/27.jpg)
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
4. If the manifest file itself can't be retrieved, the cache will ignored!
![Page 28: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/28.jpg)
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
5. Non-cached resources will not load on a cached page!
![Page 29: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/29.jpg)
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!
![Page 30: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/30.jpg)
App Cache – Some gotchas!
Offline strategies for HTML5 web applications
7. To avoid the risk of caching manifest files set expires headers!
![Page 31: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/31.jpg)
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
![Page 32: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/32.jpg)
App Cache – What to cache?
Offline strategies for HTML5 web applications
Use the app cache for „static content“ only!
![Page 33: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/33.jpg)
Data URI Schema
Offline strategies for HTML5 web applications
![Page 34: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/34.jpg)
<!DOCTYPE HTML><html> <head> <title>The Data URI scheme</title> <style type="text/css"> ul.checklist li { marginleft: 20px; background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==') norepeat scroll left top;} </style> </head> <body> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> </body></html>
Data URI Schema
Offline strategies for HTML5 web applications
![Page 35: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/35.jpg)
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
![Page 36: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/36.jpg)
Offline strategies for HTML5 web applications
Example: Todolist application
![Page 37: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/37.jpg)
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
Find the sources here:github.com/bitExpert/html5-offline
![Page 38: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/38.jpg)
Storing dynamic data locally (in HTML5)
Offline strategies for HTML5 web applications
Web Storage, Web SQL Database, IndexedDB, File API
![Page 39: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/39.jpg)
Web Storage
Offline strategies for HTML5 web applications
![Page 40: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/40.jpg)
Web Storage
Offline strategies for HTML5 web applications
Very convenient form of offline storage: simple key-value store
![Page 41: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/41.jpg)
Web Storage: 2 different types
Offline strategies for HTML5 web applications
localStorage vs. sessionStorage
![Page 42: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/42.jpg)
function add(item) {try {
// for a new item set idif((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {item.id = get_lastIndex() + 1;
}
// store object as stringlocalStorage.setItem(item.id,
JSON.stringify(item) );
// update the indexset_lastIndex(item.id);
}catch(ex) {
console.log(ex);}
}
Web Storage: Add item
Offline strategies for HTML5 web applications
![Page 43: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/43.jpg)
Web Storage: Modify item
Offline strategies for HTML5 web applications
function modify(item) {try {
// store object as stringlocalStorage.setItem(item.id,
JSON.stringify(item) );
}catch(ex) {
console.log(ex);}
}
![Page 44: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/44.jpg)
Web Storage: Remove item
Offline strategies for HTML5 web applications
function remove (id) {try {
localStorage.removeItem(id);}catch(ex) {
console.log(ex);}
}
![Page 45: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/45.jpg)
Web Storage: Read items
Offline strategies for HTML5 web applications
function read() { try {
var lastIdx = get_lastIndex(); for(var i = 1; i <= lastIdx; i++) {
if(null !== localStorage.getItem(i)) { // parse and render item var item = JSON.parse(
localStorage.getItem(i) );
} }
} catch(ex) {
console.log(ex); }}
![Page 46: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/46.jpg)
Web Storage: How to use sessionStorage?
Offline strategies for HTML5 web applications
![Page 47: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/47.jpg)
Web Storage: How to use sessionStorage?
Offline strategies for HTML5 web applications
Replace „localStorage“with „sessionStorage“
![Page 48: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/48.jpg)
function add(item) {try {
// for a new item set idif((typeof item.id === "undefined")
|| (null == item.id) || ("" == item.id)) {item.id = get_lastIndex() + 1;
}
// store object as stringsessionStorage.setItem(item.id,
JSON.stringify(item) );
// update the indexset_lastIndex(item.id);
}catch(ex) {
console.log(ex);}
}
Web Storage: Add item (sessionStorage style)
Offline strategies for HTML5 web applications
![Page 49: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/49.jpg)
Web Storage: Don`t like method calls?
Offline strategies for HTML5 web applications
![Page 50: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/50.jpg)
Web Storage: Don`t like method calls?
Offline strategies for HTML5 web applications
var value = "my value";
// method calllocalStorage.setItem("key", value);
// Array accessorlocalStorage[key] = value;
// Property accessorlocalStorage.key = value;
![Page 51: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/51.jpg)
Offline Strategien für HTML5 Web Applikationen
What`s in the store?
![Page 52: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/52.jpg)
Web Storage: Pro
Offline strategies for HTML5 web applications
Most compatible format up to now.
![Page 53: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/53.jpg)
Web Storage: Con
Offline strategies for HTML5 web applications
The data is not structured.
![Page 54: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/54.jpg)
Web Storage: Con
Offline strategies for HTML5 web applications
No transaction support!
![Page 55: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/55.jpg)
Web Storage: Con
Offline strategies for HTML5 web applications
Lack of automatically expiring storage.
![Page 56: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/56.jpg)
Web Storage: Con
Offline strategies for HTML5 web applications
Inadequate information about storage quota.
![Page 57: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/57.jpg)
Web SQL Database
Offline strategies for HTML5 web applications
![Page 58: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/58.jpg)
Web SQL Database
Offline strategies for HTML5 web applications
An offline SQL database based on SQLite, an general-purpose SQL engine.
![Page 59: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/59.jpg)
Web SQL Database: Callback methods
Offline strategies for HTML5 web applications
var onError = function(tx, ex) {alert("Error: " + ex.message);
};
var onSuccess = function(tx, results) {var len = results.rows.length;
for(var i = 0; i < len; i++) {// render found todo itemrender(results.rows.item(i));
}};
![Page 60: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/60.jpg)
Web SQL Database: Setup Database
Offline strategies for HTML5 web applications
// initalize the database connectionvar db = openDatabase('todo', '1.0', 'Todo Database', 5 * 1024 * 1024 );
db.transaction(function (tx) {tx.executeSql(
'CREATE TABLE IF NOT EXISTS todo '+ '(id INTEGER PRIMARY KEY ASC, todo TEXT)',
[], onSuccess, onError
);});
![Page 61: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/61.jpg)
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
);});
}
![Page 62: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/62.jpg)
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.todoitem.id
],onSuccess,onError
);});
}
![Page 63: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/63.jpg)
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
);});
}
![Page 64: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/64.jpg)
Web SQL Database: Read items
Offline strategies for HTML5 web applications
function read() {db.transaction(function (tx) {
tx.executeSql('SELECT * FROM todo',[],onSuccess,onError
);});
}
![Page 65: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/65.jpg)
Web SQL Database: Pro
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
![Page 66: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/66.jpg)
Web SQL Database: Con
Offline strategies for HTML5 web applications
It`s a SQL database within the browser!
![Page 67: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/67.jpg)
Web SQL Database: Con
Offline strategies for HTML5 web applications
SQLite is slooooow!
![Page 68: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/68.jpg)
Web SQL Database: Con
Offline strategies for HTML5 web applications
The specification is no longer part of HTML5!
![Page 69: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/69.jpg)
IndexedDB
Offline strategies for HTML5 web applications
![Page 70: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/70.jpg)
IndexedDB
Offline strategies for HTML5 web applications
A nice compromise between Web Storage and Web SQL Database giving
you the best of both worlds.
![Page 71: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/71.jpg)
IndexedDB: Preparation
Offline strategies for HTML5 web applications
// different browsers, different naming conventionsvar indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
![Page 72: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/72.jpg)
IndexedDB: Create object store
Offline strategies for HTML5 web applications
var db = null;var request = indexedDB.open("todo");request.onfailure = onError;request.onsuccess = function(e) {
db = request.result;var v = "1.0";if(v != db.version) {
var verRequest = db.setVersion(v);verRequest.onfailure = onError;verRequest.onsuccess = function(e) {
var store = db.createObjectStore("todo",{
keyPath: "id",autoIncrement: true
});e.target.transaction.oncomplete =
function() {};};
}};
![Page 73: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/73.jpg)
IndexedDB: Add item
Offline strategies for HTML5 web applications
function add(item) {try {
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");var request = store.put({
"todo": item.todo,});
}catch(ex) {
onError(ex);}
}
![Page 74: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/74.jpg)
IndexedDB: Modify item
Offline strategies for HTML5 web applications
function modify(item) {try {
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");var request = store.put(item);
}catch(ex) {
onError(ex);}
}
![Page 75: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/75.jpg)
IndexedDB: Remove item
Offline strategies for HTML5 web applications
function remove(id) {try {
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");var request = store.delete(id);
}catch(ex) {
onError(ex);}
}
![Page 76: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/76.jpg)
IndexedDB: Read items
Offline strategies for HTML5 web applications
function read () {try {
var trans = db.transaction(["todo"], IDBTransaction.READ);
var store = trans.objectStore("todo");var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) {var result = e.target.result;if(!!result == false) {
return;}// @TODO: render result.valueresult.continue();
};}catch(ex) {
onError(ex);}
}
![Page 77: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/77.jpg)
File API
Offline strategies for HTML5 web applications
![Page 78: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/78.jpg)
File API
Offline strategies for HTML5 web applications
FileReader API and FileWriter API
![Page 79: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/79.jpg)
File API: Preparations
Offline strategies for HTML5 web applications
var onError = function(e) {var msg = '';
switch(e.code) {case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR'; break;case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR'; break;case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR'; break;case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR'; break;case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR'; break;default:
msg = 'Unknown Error'; break;};
alert("Error: " + msg);};
![Page 80: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/80.jpg)
File API: Preparations
Offline strategies for HTML5 web applications
// File system has been prefixed as of Google Chrome 12window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder;
var size = 5 * 1024*1024; // 5MB
![Page 81: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/81.jpg)
File API: Requesting quota
Offline strategies for HTML5 web applications
// request quota for persistent storewindow.webkitStorageInfo.requestQuota(
PERSISTENT,size,function(grantedBytes) {
window.requestFileSystem(PERSISTENT,grantedBytes,function(fs) {
// @TODO: access filesystem}
}}
}
![Page 82: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/82.jpg)
Offline strategies for HTML5 web applications
![Page 83: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/83.jpg)
File API: Add item
Offline strategies for HTML5 web applications
function add(item) { window.webkitStorageInfo.requestQuota(
PERSISTENT, size, function(grantedBytes) {
window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){
writeToFile(fs, item); }, onError
); }, function(e) {
onError(e); }
); },
![Page 84: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/84.jpg)
File API: Add item
Offline strategies for HTML5 web applications
function writeToFile(fs, item) {fs.root.getFile(
'todo.txt',{
create: true},function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var bb = new window.BlobBuilder();bb.append(JSON.stringify(item)+
"\n");
fileWriter.seek(fileWriter.length);fileWriter.write(
bb.getBlob('text/plain'));}, onError
);}, onError
);};
![Page 85: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/85.jpg)
function writeToFile(fs, item) {fs.root.getFile(
'todo.txt',{
create: true},function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var bb = new window.BlobBuilder();bb.append(JSON.stringify(item)+
"\n");
fileWriter.seek(fileWriter.length);fileWriter.write(
bb.getBlob('text/plain'));}, onError
);}, onError
);};
File API: Add item
Offline strategies for HTML5 web applications
Deprec
ated!
![Page 86: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/86.jpg)
function writeToFile(fs, item) {fs.root.getFile(
'todo.txt',{
create: true},function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var blob = new Blob([ JSON.stringify(item)+"\n"]);
fileWriter.seek(fileWriter.length);fileWriter.write(blob);
}, onError);
}, onError);
};
File API: Add item
Offline strategies for HTML5 web applications
![Page 87: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/87.jpg)
File API: Read items
Offline strategies for HTML5 web applications
function read() { window.webkitStorageInfo.requestQuota(
PERSISTENT, size, function(grantedBytes) {
window.requestFileSystem( PERSISTENT, grantedBytes, function(fs){
readFromFile(fs); }, onError
); }, function(e) {
onError(e); }
);}
![Page 88: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/88.jpg)
File API: Read items
Offline strategies for HTML5 web applications
function readFromFile(fs) {fs.root.getFile(
'todo.txt',{
create: true},function(fileEntry) {
fileEntry.file(function(file){var reader = new FileReader();reader.onloadend = function(e) {
if (evt.target.readyState == FileReader.DONE) { // process this.result}
};reader.readAsText(file);
});}, onError
);}
![Page 89: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/89.jpg)
Am I online?
Offline strategies for HTML5 web applications
![Page 90: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/90.jpg)
Am I online?
Offline strategies for HTML5 web applications
document.body.addEventListener("online", function () { // browser is online!}
document.body.addEventListener("offline", function () { // browser is not online!}
![Page 91: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/91.jpg)
Am I online? Another approach...
Offline strategies for HTML5 web applications
$.ajax({ dataType: 'json', url: 'http://myappurl.com/ping', success: function(data){ // ping worked }, error: function() { // ping failed -> Server not reachable }});
![Page 92: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/92.jpg)
How to sync your data?
Offline strategies for HTML5 web applications
![Page 93: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/93.jpg)
How to sync your data?
Offline strategies for HTML5 web applications
PouchDB, the JavaScript Database that syncs!
![Page 94: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/94.jpg)
var db = new PouchDB('todo');
db.put({ _id: 1, todo: 'Get some work done...',});
db.replicate.to('http://example.com/mydb');
How to sync your data?
Offline strategies for HTML5 web applications
![Page 95: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/95.jpg)
noBackend solution
Offline strategies for HTML5 web applications
![Page 96: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/96.jpg)
noBackend solution
Offline strategies for HTML5 web applications
An approach to decouple apps from backends, by abstracting backend
tasks with frontend code.
![Page 97: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/97.jpg)
noBackend solution
Offline strategies for HTML5 web applications
„Hoodie is an architecture for
frontend-only web apps“
![Page 98: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/98.jpg)
Browser support?
Offline strategies for HTML5 web applications
![Page 99: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/99.jpg)
Browser support?
Offline strategies for HTML5 web applications
Source: http://caniuse.com
App Cache Web Storage WebSQL IndexedDB File API
IE 10.0 8.0 10.0 10.0 -
Firefox 11.0 11.0 11.0 11.0 19.0
Chrome 18.0 18.0 18.0 18.0 18.0
Safari 5.1 5.1 5.1 - -
Opera 12.1 12.1 12.1 - -
iOS Safari 3.2 3.2 3.2 - -
Android 2.1 2.1 2.1 - -
![Page 100: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/100.jpg)
Storage limitations?
Offline strategies for HTML5 web applications
![Page 101: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/101.jpg)
Storage limitations?
Offline strategies for HTML5 web applications
All storage technologies are limited by quotas. Be aware of what you do!
![Page 102: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/102.jpg)
Storage limitations?
Offline strategies for HTML5 web applications
App Cache Web Storage WebSQL IndexedDB File API
iOS 5.1 10 MB 5 MB 5 MB 5 MB
Android 4 unlimited 5 MB ? ?
Safari 5.2 unlimited 5 MB 5 MB 5 MB
Chrome 18 5 MB 5 MB unlimited unlimited unlimited
IE 10 50 MB 10 MB 500 MB 500 MB
Opera 11 50 MB 5 MB 5 MB 5 MB
Firefox 11 unlimited 10 MB 50 MB 50 MB
![Page 103: Offline strategies for HTML5 web applications - frOSCon8](https://reader034.vdocuments.us/reader034/viewer/2022051512/540be8c68d7f726a208b4790/html5/thumbnails/103.jpg)
Thank you!