The Year is 2011
Fully Offline
http://3.bp.blogspot.com/-4GRdPFTuLe0/TWeVXQPbgWI/AAAAAAAABNM/3KS_6-O1_QE/s1600/sinuous-game.jpg
"Always" Online (no such thing!)
images/screenshot-20110217.png
Online-Offline ← critical in 2011
http://kayo8.files.wordpress.com/2007/02/google-docs.gif
Google IO two weeks ago ...
http://www.jonkragh.com/wp-content/uploads/google-map-marker-google-io-20091.jpg
App Cache
Web SQL
images/springpad.jpg
App Cache
Web SQL (planned)
FileSystem (planned)
http://www.designbeckons.com/wp-content/uploads/2010/08/CM-Capture-11.jpg
App Cache
IndexedDB
FileSystem
http://cashrevelations.com/magazine/wp-content/media/cloud9-ide.jpg
images/angrybirds.png
Right, let's do this.
* Offline the App:App Cache * Offline the Data:
Local Storage
Web SQL
Indexed Database
FileSystem * Library support * Offline the App:
App Cache * Offline the Data:
Local Storage
Web SQL
Indexed Database
FileSystem * Library support Demo - html5photos.appspot.com images/html5photos.jpg Offline the App: App Cache ==== <html manifest="cache.manifest"> CACHE MANIFEST index.html index.css index.js logo.png ... ==== Serve it with the right MIME type ==== AddType text/cache-manifest manifest ====
Browser checks manifesto on every visit
... So version numbers are good
====
CACHE MANIFEST
# 3.141
index.html
...
====
... Even better, generate the manifest
====
CACHE MANIFEST
<?= checksum($files) ?>
<? foreach ($files as $file) { ?>
<?= $file ?>
<? } ?>
====
Make sure manifest is not cached!
Graceful Degradation: The Offline Experience
====
<html manifest="cache.manifest">
CACHE MANIFEST
CACHE:
index.html
...
FALLBACK:
/checkins/* no-go.html
NETWORK:
/weather/*
====
The "URLs on a plane" problem
http://prez.mahemoff.com/wd-offline/images/urlsonaplane.jpg
http://prez.mahemoff.com/wd-offline/images/farm5.static.flickr.com__4103__5004321820_8b09d3c58d_o.jpg
http://prez.mahemoff.com/wd-offline/images/farm5.static.flickr.com__4081__5017980645_7d997740a1_b.jpg
http://www.geeky-gadgets.com/wp-content/uploads/2010/12/google-chrome-web-store.jpg
Declarative → Procedural
====
alert(window.applicationCache.status);
window.applicationCache.addEventListener("cached", onAppCached, false);
window.applicationCache.update();
window.applicationCache.swapCache();
====
* Offline the App:App Cache * Offline the Data:Local Storage
Web SQL
Indexed Database
FileSystem * Library Support Content images/news.jpg User data images/springitems.jpg Stats — offline analytics? http://venturebeat.com/wp-content/uploads/2009/06/google_analytics.jpg Background apps — Pre-emptive downloading images/background.png Demo — j.mp/geomood images/geomood.jpg
App Cache * Offline the Data:
Local Storage
Web SQL
Indexed Database
FileSystem * Library support 1. LocalStorage aka "Web Storage" #000 LocalStorage ==== localStorage.foo = "bar"; localStorage["foo"] = "bar"; localStorage.setItem("foo", "bar"); ====
LocalStorage: It's all about the string.
(De)serialization
====
localStorage.checkins = JSON.stringify([]); // reset
localStorage.checkins = JSON.stringify(checkins);
var allCheckins = JSON.parse(localStorage.checkins);
====
(despite the spec)
Local Storage
Local Storage
All storage mechanisms are subject to quotas
Get around quotas with
installed web apps or native APIs
2. Web SQL Database
(Deprecated but widespread)
#000
images/websql.png
Web SQL Database: open+create DB
====
var db = openDatabase('geomood', '1.0', 'Geo-Mood Checkins', 8192);
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)",
[],
onCreated,
this.onError
);
});
====
Web SQL Database: queries
====
store.db.transaction(function(tx) {
tx.executeSql(
"select * from checkins where mood=?",
[moodQuery],
function(tx, results) {
for (i = 0; i < results.rows.length; i++) {
handler(clone(results.rows.item(i)));
},
store.onError
);
});
====
installed web apps or native APIs
Web SQL
Web SQL
In IndexedDB, "Requests" are first-class citizens
Indexed Database — async idiom
====
var request = doSomething();
request.onsuccess = function() { doSomething(request.result); };
request.onerror = function() { ... };
====
Indexed Database — open database
====
var openRequest = indexedDB.open("geomood", "Geo-Mood Checkins");
openRequest.onsuccess = function(ev) {
db = ev.target.result;
db.onerror = function(ev) {
console.log("db error", ev.target.webkitErrorMessage);
};
if (db.version!="1.5") resetDB(); // MUST set version to change DB
}
}
====
Indexed Database — create/update database
====
...
if (db.version!="1.5") {
var versionRequest = db.setVersion("1.5");
versionRequest.onsuccess = function(ev) {
if (db.objectStoreNames.contains("checkins"))
db.deleteObjectStore("checkins"); // synchronous
var checkinsStore = db.createObjectStore
("checkins", { keyPath: "time" }); // synchronous
};
}
====
Indexed Database — create object store
====
db.createObjectStore("checkins"); // provide key when add()ing
db.createObjectStore("checkins", { autoIncrement: true }); // key auto-generated
db.createObjectStore("checkins", { keyPath: "time" }); // key inferred
====
Indexed Database — add and retrieve
====
var tx = db.transaction([], IDBTransaction.READ_WRITE, 0); // or READ_ONLY
var store = tx.objectStore("checkins");
var addRequest = store.add(checkin); // "put" if unique
addRequest.onsuccess = function() { ... }
var getRequest = store.get(id); // "put" if unique
getRequest.onsuccess = function() { show(request.result); }
====
Are we missing something?
Indexed Database — yes we have index!
====
var store = db.createObjectStore("checkins");
store.createIndex("moodIndex", "mood", { unique: false });
var moodIndex = store.index("moodIndex")
var getRequest = moodIndex.get("happy");
getRequest.onSuccess = function() { show(request.result()); };
====
Indexed Database — iterating through results
====
var cursorRequest = moodIndex.openCursor(new IDBKeyRange.only(moodQuery));
cursorRequest.onsuccess = function(ev) {
var cursor = cursorRequest.result;
if (cursor) {
show(cursor.value);
cursor.continue();
}
};
====
Indexed Database — Neutralize across browsers
====
var indexedDB = window.indexedDB ||
window.webkitIndexedDB ||
window.mozIndexedDB;
var IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.mozIDBTransaction;
var IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.mozIDBKeyRange;
====
IndexedDB
IndexedDB
(Chrome+FF; no mobile)
File API gives us Readers and Writers,
just like C, C++ et al
File API — Reader/Writer idiom
====
reader = new FileReader();
reader.onload = function() { doSomething(this.result); };
reader.readAsText(file);
====
FileSystem — Create file
====
fs.root.getFile(
"checkins/" + checkin.time,
{create: true, exclusive: true},
function(file) {
file.createWriter(function(writer) {
var bb = new WebKitBlobBuilder;
bb.append(JSON.stringify(checkin));
writer.write(bb.getBlob("text/plain"));
});
}
);
====
FileSystem — Read directory
====
checkinsDir.createReader().readEntries(function(fileEntries) {
...
});
====
just like C, C++ et al
For now, need Chromium's
--unlimited-quota-for-files flag
--unlimited-quota-for-files flag
WebFS: A commonJS Adaptor http://goo.gl/TU0Iv
FileSystem
FileSystem
Offline Trivia Quiz http://atari.fandal.cz/files/images/games/t/trivia_quiz.png
Android+iPhone+Opera Mobile app:
Stores past emails
Stores past emails
Web app:
Stores user preferences
Stores user preferences
Web app:
Stores purchased MP3s
Stores purchased MP3s
Firefox extension:
Stores time spent on each website
* Offline the App:Stores time spent on each website
App Cache * Offline the Data:
Local Storage
Web SQL
Indexed Database
FileSystem * Library support Lawnchair: Generic storage ==== var store = new Lawnchair("checkins"); var checkin = { id: +new Date, mood: "Over the Moon" }; store.save(checkin); store.get(123); store.all(); ==== Polyfills/Shims http://j.mp/html5polyfills images/poly.jpg ^ contentPlace:"1-3" Beyond persistence: Automatic Syncing http://s3.mylesbraithwaite.com/presentations/oglf/2009/CouchDB/slide.001.png ^ contentPlace:"1-3" More like this please! http://s3.mylesbraithwaite.com/presentations/oglf/2009/CouchDB/slide.001.png Slides: http://prez.mahemoff.com/wdx-offline More: http://www.html5rocks.com/tutorials/ #storage #offline Contact: mahemoff@google.com | @mahemoff http://prez.mahemoff.com/wd-offline/images/farm3.static.flickr.com__2485__3759228220_4e039da0d4_b.jpg