Html5 : stockage local & synchronisation

HTML 5 stockage local& synchronisation Raphaël Rougeron @goldoraf

Une mutation est en cours Pages HTML Serveur Client Single-Page Application JSON

Form validation GeolocationDrag n Drop API Web Notifications Canvas WebGL Video Audio File API Web Workers Web Sockets

Stockage local

1er bénéfice : le offline ?

1er bénéfice : économiser le serveur !Source : HTML5 Web Sockets: A Quantum Leap in Scalability for the Webhttp://soa.sys-con.com/node/1315473

4 étapes

Etape 1 Rendre les ressourcesdisponibles hors connexion

Application Cache<html manifest="cache.manifest"> <html manifest="cache.manifest"> CACHE MANIFEST CACHE MANIFEST CACHE: CACHE: index.html index.html css/style.css css/style.css img/logo.png img/logo.png js/main.js js/main.js text/cachemanifest

!Avoir un manifestechange complètementles règles daccès aux ressources

CACHE MANIFEST CACHE MANIFEST# v.1.2build1234 # v.1.2build1234CACHE: CACHE:index.html index.htmlcss/style.css css/style.cssimg/logo.png img/logo.pngjs/main.js js/main.js

CACHE MANIFEST CACHE MANIFEST# v.1.2build1234 # v.1.2build1234CACHE: CACHE:index.html index.htmlcss/style.css css/style.cssimg/logo.png img/logo.pngjs/main.js js/main.jsNETWORK NETWORK/sync /sync/api/* /api/*http://api.twitter.com http://api.twitter.com

CACHE MANIFEST CACHE MANIFEST# v.1.2build1234 # v.1.2build1234CACHE: CACHE:index.html index.htmlcss/style.css css/style.cssimg/logo.png img/logo.pngjs/main.js js/main.jsNETWORK NETWORK/sync /sync/api/* /api/*http://api.twitter.com http://api.twitter.comFALLBACK FALLBACKimages/large/ images/offline.jpg images/large/ images/offline.jpg*.html /offline.html *.html /offline.html

window.applicationCache status UNCACHED IDLE CHECKING DOWNLOADING UPDATEREADY OBSOLETE

>= 10 ? >= 3.5 >= 4.0 >= 4.0 >= 10.6 >= 3.2 >= 2.1 >= 11.0

Etape 2Découpler lapplication du réseau

Backbone.Sync● create() POST /collection● read() GET /collection[/id]● update() PUT /collection/id● delete() DELETE /collection/id

Etape 3Stocker localement les données

3 options

FileSystem API ! seulement

window.requestFileSystem = window.requestFileSystem window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; || window.webkitRequestFileSystem;window.requestFileSystem(window.TEMPORARY, window.requestFileSystem(window.TEMPORARY, 5*1024*1024, 5*1024*1024, onInitFs, errorHandler); onInitFs, errorHandler); window.webkitStorageInfo.requestQuota(window.PERSISTENT, window.webkitStorageInfo.requestQuota(window.PERSISTENT, 5*1024*1024, 5*1024*1024, initFS, errorHandler); initFS, errorHandler);function initFS(grantedBytes) { function initFS(grantedBytes) { window.requestFileSystem(PERSISTENT, grantedBytes, window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); onInitFs, errorHandler);}}

FileErrorcodeQUOTA_EXCEEDED_ERRNOT_FOUND_ERRSECURITY_ERRINVALID_MODIFICATION_ERRINVALID_STATE_ERR

FileEntrynamefullpathisFileisDirectory…file()createWriter()moveTo()copyTo()remove()...

Web StoragelocalStorage et sessionStorage

Un simple dépôt clé-valeurlocalStorage.setItem("foo", "bar"); localStorage.setItem("foo", "bar");localStorage.setItem("tweets", JSON.stringify(tweets); localStorage.setItem("tweets", JSON.stringify(tweets);var tweets = JSON.parse(localStorage.getItem("tweets")); var tweets = JSON.parse(localStorage.getItem("tweets"));

Quota de 5 Mo! Pas de transactions Pas dindexation

localStorage["tweets:1234"] = "Lorem ipsum..."; localStorage["tweets:1234"] = "Lorem ipsum...";localStorage["tweets:1235"] = "Nam mauris lorem..."; localStorage["tweets:1235"] = "Nam mauris lorem...";localStorage["tags"] = JSON.stringify(["Java", "Python", localStorage["tags"] = JSON.stringify(["Java", "Python", "Ruby", "PHP"]); "Ruby", "PHP"]);localStorage["tags:Java"] = JSON.stringify([1234, 1235]); localStorage["tags:Java"] = JSON.stringify([1234, 1235]);

➔ Très bien supporté ➔ Performances➔ API simple ➔ API synchrone➔ Mis en avant par de nb ➔ Sérialisation compagnies/projets ➔ Requêtes ➔ Complexité ➔ "indexation" manuelle ➔ Maintien intégrité

>= 8 >= 3.5 >= 4.0 >= 4.0 >= 10.5 >= 3.2 >= 2.1 >= 11.0

localStorage adapterBackbone.sync = function(method, model, options) { Backbone.sync = function(method, model, options) { var resp; var resp; var store = model.localStorage || model.collection.localStorage; var store = model.localStorage || model.collection.localStorage; switch (method) { switch (method) { case "read": resp = model.id ? store.find(model) : case "read": resp = model.id ? store.find(model) : store.findAll(); store.findAll(); break; break; case "create": resp = store.create(model); case "create": resp = store.create(model); break; break; case "update": resp = store.update(model); case "update": resp = store.update(model); break; break; case "delete": resp = store.destroy(model); case "delete": resp = store.destroy(model); break; break; } } if (resp) { if (resp) { options.success(resp); options.success(resp); } else { } else { options.error("Record not found"); options.error("Record not found"); } }}; };

Petit intermède Vous connaissez Redis ?BankersBoxvar bb = new BankersBox(1); var bb = new BankersBox(1);bb.set("foo", "bar"); bb.set("foo", "bar");bb.get("foo"); // returns "bar" bb.get("foo"); // returns "bar"bb.set("count", 10); bb.set("count", 10);bb.incr("count"); // sets "count" to 11, returns 11 bb.incr("count"); // sets "count" to 11, returns 11bb.incr("newcount"); // sets "newcount" to 1, returns 1 bb.incr("newcount"); // sets "newcount" to 1, returns 1bb.lpush("mylist", "hello"); bb.lpush("mylist", "hello");bb.lrange("mylist", 0, 1); // returns ["hello"] bb.lrange("mylist", 0, 1); // returns ["hello"]bb.rpush("mylist", "world"); bb.rpush("mylist", "world");bb.lrange("mylist", 0, 1); // returns ["hello", "world"] bb.lrange("mylist", 0, 1); // returns ["hello", "world"]bb.sadd("myset", "apple"); bb.sadd("myset", "apple");bb.sadd("myset", "oragne"); bb.sadd("myset", "oragne");

IndexedDB

Préfixes, préfixes...window.indexedDB = window.indexedDB || window.mozIndexedDB || window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; window.webkitIndexedDB;window.IDBKeyRange = window.IDBKeyRange || window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; window.webkitIDBKeyRange;window.IDBTransaction = window.IDBTransaction || window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; window.webkitIDBTransaction;

API asynchronefunction IndexedDBAdapter() { function IndexedDBAdapter() { this.db = null; this.db = null; var request = indexedDB.open("contactApp"); var request = indexedDB.open("contactApp"); request.onsuccess = function(e) { request.onsuccess = function(e) { this.db = e.target.result; this.db = e.target.result; }.bind(this); }.bind(this); request.onfailure = function(e) { request.onfailure = function(e) { console.log("Could not connect to the database"); console.log("Could not connect to the database"); }}}; };

Création dun dépôtIndexedDBAdapter.prototype.create = function(storeName) { IndexedDBAdapter.prototype.create = function(storeName) { var v = "1.0"; var v = "1.0"; var request = this.db.setVersion(v); var request = this.db.setVersion(v); request.onsuccess = function(e) { request.onsuccess = function(e) { var store = this.db.createObjectStore(storeName, { var store = this.db.createObjectStore(storeName, { "keyPath": "id", "keyPath": "id", "autoIncrement": true "autoIncrement": true }); }); }; }; request.onblocked = function(e) { request.onblocked = function(e) { console.log("The database is open in another tab."); console.log("The database is open in another tab."); }; };}; };

Persistence dun objetIndexedDBAdapter.prototype.save(storeName, object, callback) IndexedDBAdapter.prototype.save(storeName, object, callback) {{ var trans = db.transaction([storeName], var trans = db.transaction([storeName], IDBTransaction.READ_WRITE, 0); IDBTransaction.READ_WRITE, 0); var store = trans.objectStore(storeName); var store = trans.objectStore(storeName); var request = store.put(object); var request = store.put(object); request.onsuccess = function(e) { request.onsuccess = function(e) { callback(object); callback(object); }; };}; };

Requête simpleIndexedDBAdapter.prototype.all(storeName, callback) { IndexedDBAdapter.prototype.all(storeName, callback) { var trans = db.transaction([storeName], var trans = db.transaction([storeName], IDBTransaction.READ_WRITE, 0); IDBTransaction.READ_WRITE, 0); var store = trans.objectStore(storeName); var store = trans.objectStore(storeName); var keyRange = IDBKeyRange.lowerBound(0); var keyRange = IDBKeyRange.lowerBound(0); var request = store.openCursor(keyRange); var request = store.openCursor(keyRange); request.onsuccess = function(e) { request.onsuccess = function(e) { var cursor = e.target.result; var cursor = e.target.result; if (cursor) { if (cursor) { callback(cursor.value); callback(cursor.value); cursor.continue(); cursor.continue(); }} }; };}; };

Key RangesIDBKeyRange.upperBound(x); // <= x IDBKeyRange.upperBound(x); // <= xIDBKeyRange.upperBound(x, true); // < x IDBKeyRange.upperBound(x, true); // < xIDBKeyRange.lowerBound(y); // >= y IDBKeyRange.lowerBound(y); // >= yIDBKeyRange.lowerBound(y, true); // > y IDBKeyRange.lowerBound(y, true); // > yIDBKeyRange.bound(x, y); // >= x && <= y IDBKeyRange.bound(x, y); // >= x && <= yIDBKeyRange.bound(x, y, true, false); // > x && <= y IDBKeyRange.bound(x, y, true, false); // > x && <= y

Indexvar contacts = [ var contacts = [ { firstname: "John", lastname: "Doe", email: "jdoe@zz.com" }, { firstname: "John", lastname: "Doe", email: "jdoe@zz.com" }, { firstname: "Jane", lastname: "Doe", email: "jane@zz.com" }, { firstname: "Jane", lastname: "Doe", email: "jane@zz.com" }, { firstname: "Johnny", lastname: "Carson", email: "jca@zz.com" } { firstname: "Johnny", lastname: "Carson", email: "jca@zz.com" }]; ];objectStore.createIndex("firstname", "firstname", { unique: false }); objectStore.createIndex("firstname", "firstname", { unique: false });objectStore.createIndex("lastname", "lastname", { unique: false }); objectStore.createIndex("lastname", "lastname", { unique: false });objectStore.createIndex("email", "email", { unique: true }); objectStore.createIndex("email", "email", { unique: true });

Indexvar contacts = [ var contacts = [ { firstname: "John", lastname: "Doe", email: "jdoe@zz.com" }, { firstname: "John", lastname: "Doe", email: "jdoe@zz.com" }, { firstname: "Jane", lastname: "Doe", email: "jane@zz.com" }, { firstname: "Jane", lastname: "Doe", email: "jane@zz.com" }, { firstname: "Johnny", lastname: "Carson", email: "jca@zz.com" } { firstname: "Johnny", lastname: "Carson", email: "jca@zz.com" }]; ];var index = objectStore.index("lastname"); var index = objectStore.index("lastname");index.openCursor(IDBKeyRange.only("Doe")).onsuccess = function(e) { index.openCursor(IDBKeyRange.only("Doe")).onsuccess = function(e) { var cursor = e.target.result; var cursor = e.target.result; if (cursor) { if (cursor) { callback(cursor.value); callback(cursor.value); cursor.continue(); cursor.continue(); }}}; };var index = objectStore.index("firstname"); var index = objectStore.index("firstname");index.openCursor(IDBKeyRange.lowerbound("John")).onsuccess = index.openCursor(IDBKeyRange.lowerbound("John")).onsuccess = function(e) { function(e) { ... ...}; };

>= 10 ? >= 8.0 >= 16.0 ? ? ? ? ?

Et pourquoi pasWeb SQL Database ?

X X >= 4.0 >= 3.1 >= 10.5 >= 3.2 >= 2.1 >= 11.0

Le polyfill ultime ? Lawnchair ● localStorage ● indexedDB ● webkitsqlite ● gearssqlite ● ieuserdata ● backberrypersistentstore ● windowname

Etape 4Développer une stratégie de synchronisation

Lexemple dActiveSync

POST /MicrosoftServerActiveSync?User=jdoe@zz.com&...POST /MicrosoftServerActiveSync?User=jdoe@zz.com&... &Cmd=<Commande> &Cmd=<Commande>Cmd=FolderSync&SyncKey=123456789Cmd=FolderSync&SyncKey=123456789{{ folders: [ folders: [ contacts: { contacts: { id: 1234, id: 1234, created: 0, created: 0, updated: 2, updated: 2, deleted: 1 deleted: 1 }, }, todos: { todos: { id: 5678, id: 5678, created: 5, created: 5, updated: 0, updated: 0, deleted: 2 deleted: 2 } } ] ]}}

Cmd=Sync&SyncKey=123456789&FolderId=5678Cmd=Sync&SyncKey=123456789&FolderId=5678{{ syncKey: 987654321, syncKey: 987654321, created: [ created: [ { id: 4321, label: "Acheter le pain" }, { id: 4321, label: "Acheter le pain" }, ... ... ], ], updated: [ updated: [ ... ... ], ], deleted: [ deleted: [ 5678, 7890 5678, 7890 ] ]}}

Autres pistesMozilla ServicesSyncMLOperational Transformation → ShareJS

Etape subsidiaire Le "push"

PollingClient Serveur n secondes n secondes

Long polling (COMET) Client Serveur Événement côté serveur Événement côté serveur

WebSockets

HandshakeGET /resource name/ HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: /server/Origin: /origin/WebSocketProtocol: /protocol/HTTP/1.1 101 Web Socket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeWebSocketOrigin: /origin/WebSocketLocation: /url/WebSocketProtocol: /subprotocol/

Serveur (avec node.js) var io = require(socket.io).listen(80); var io = require(socket.io).listen(80); io.sockets.on(connection, function (socket) { io.sockets.on(connection, function (socket) { socket.emit(news, { hello: world }); socket.emit(news, { hello: world }); socket.on(my other event, function (data) { socket.on(my other event, function (data) { console.log(data); console.log(data); }); }); }); });Client var socket = io.connect(http://localhost); var socket = io.connect(http://localhost); socket.on(news, function (data) { socket.on(news, function (data) { console.log(data); console.log(data); socket.emit(my other event, { my: data }); socket.emit(my other event, { my: data }); }); });

>= 10 ? >= 6.0 >= 14.0 >= 5.0 >= 11.0 >= 4.2 ? >= 11.0

Avec Socket.IO>= 5.5 >= 3.0 >= 4.0 >= 3.0 >= 10.61 >= 3.2 >= 2.1 >= 11.0

Server-Sent Events

HTTP traditionnelGET /myAppStreamContentType: text/eventstream

if (window.EventSource) {if (window.EventSource) { var source = new EventSource(myAppStream); var source = new EventSource(myAppStream);} else {} else { // fallback to something... // fallback to something...}}source.addEventListener(message, function(e) {source.addEventListener(message, function(e) { console.log(e.data); console.log(e.data);}, false);}, false);source.addEventListener(open, function(e) {source.addEventListener(open, function(e) { }, false);}, false);source.addEventListener(error, function(e) {source.addEventListener(error, function(e) { if (e.readyState == EventSource.CLOSED) { if (e.readyState == EventSource.CLOSED) { } }}, false);}, false);

Format des messagesdata: Hello worldnnMulti-lignedata: Hellondata: worldnnJSONdata: {ndata: "msg": "Hello world",ndata: "id": 12345ndata: }nn

Format des messagesUtilisation des IDsid: 12345ndata: {"user": "goldo", "msg": "Hello !"}nnUtilisation des eventsdata: {"msg": "Hello !"}nnevent: loginndata: {"user": "goldo"}nnevent: updatendata: {"user": "goldo", "status": "away"}nn

AvantagesReconnexion automatiqueIdsEvents

Questions / réponses

http://news.humancoders.com	162
http://www.paris-web.fr	119
https://twitter.com	31
http://speakerrate.com	20
http://us-w1.rockmelt.com	7
http://www.techgig.com	4
http://twitter.com	1
https://si0.twimg.com	1

Html5 : stockage local & synchronisation

by goldoraf

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 345

Statistics

Html5 : stockage local & synchronisation Presentation Transcript