HTML 5 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
Geolocation
Drag n' Drop API
Web Notifications
Canvas
WebGL Video
Audio
File API
Web Workers

Web Sockets

1er bénéfice : économiser le
serveur !

Source : HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
http://soa.sys-con.com/node/1315473

Etape 1
Rendre les ressources
disponibles 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 manifeste
change complètement
les règles d'accès aux ressources

CACHE MANIFEST
CACHE MANIFEST

# v.1.2build1234
# v.1.2build1234
CACHE:
CACHE:
index.html
index.html
css/style.css
css/style.css
img/logo.png
img/logo.png
js/main.js
js/main.js

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

CACHE MANIFEST
CACHE MANIFEST
# v.1.2build1234
# v.1.2build1234
CACHE:
CACHE:
index.html
index.html
css/style.css
css/style.css
img/logo.png
img/logo.png
js/main.js
js/main.js
NETWORK
NETWORK
/sync
/sync
/api/*
/api/*
FALLBACK
FALLBACK
images/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 2
Découpler l'application du
réseau

Backbone.Sync
● create() POST /collection

● read() GET /collection[/id]

● update() PUT /collection/id

● delete() DELETE /collection/id

Etape 3
Stocker localement les
données

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);


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,
}}

FileError

code
QUOTA_EXCEEDED_ERR
NOT_FOUND_ERR
SECURITY_ERR
INVALID_MODIFICATION_ERR
INVALID_STATE_ERR

FileEntry
name
fullpath
isFile
isDirectory
…
file()
createWriter()
moveTo()
copyTo()
remove()
...

Web Storage
localStorage et sessionStorage

Un simple dépôt clé-valeur
localStorage.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 d'indexation

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 adapter
Backbone.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 ?
BankersBox
var 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 11
bb.incr("newcount"); // sets "newcount" to 1, returns 1
bb.incr("newcount"); // sets "newcount" to 1, returns 1
bb.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");

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 asynchrone
function IndexedDBAdapter() {
function IndexedDBAdapter() {
this.db = null;
this.db = null;
var request = indexedDB.open("contactApp");
var request = indexedDB.open("contactApp");
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 d'un dépôt
IndexedDBAdapter.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);
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 d'un objet
IndexedDBAdapter.prototype.save(storeName, object, callback)
IndexedDBAdapter.prototype.save(storeName, object, callback)
{{
var trans = db.transaction([storeName],
                              IDBTransaction.READ_WRITE, 0);
var store = trans.objectStore(storeName);
var request = store.put(object);
var request = store.put(object);
callback(object);
callback(object);
};
};
};
};

Requête simple
IndexedDBAdapter.prototype.all(storeName, callback) {
IndexedDBAdapter.prototype.all(storeName, callback) {
var keyRange = IDBKeyRange.lowerBound(0);
var keyRange = IDBKeyRange.lowerBound(0);
var request = store.openCursor(keyRange);
var request = store.openCursor(keyRange);
var cursor = e.target.result;
if (cursor) {
if (cursor) {
callback(cursor.value);
cursor.continue();
cursor.continue();
}}
};
};
};
};

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

Index
var contacts = [
var contacts = [
{ firstname: "John", lastname: "Doe", email: "jdoe@zz.com" },
{ firstname: "Jane", lastname: "Doe", email: "jane@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 });

Index
var contacts = [
var contacts = [
];
];
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) {
if (cursor) {
if (cursor) {
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 pas
Web 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 4
Développer une stratégie de
synchronisation

POST /MicrosoftServerActiveSync?User=jdoe@zz.com&...
POST /MicrosoftServerActiveSync?User=jdoe@zz.com&...
&Cmd=<Commande>
&Cmd=<Commande>

Cmd=FolderSync&SyncKey=123456789
Cmd=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=5678
Cmd=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 pistes

Mozilla Services
SyncML
Operational Transformation
→ ShareJS

Etape subsidiaire
Le "push"

Polling
Client Serveur

n secondes

n secondes

Long polling (COMET)
Client Serveur

Événement
côté serveur

Événement
côté serveur

Handshake
GET /resource name/ HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: /server/
Origin: /origin/
WebSocketProtocol: /protocol/

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocketOrigin: /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

HTTP traditionnel

GET /myAppStream

ContentType: 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 messages
data: Hello worldnn

Multi-ligne
data: Hellon
data: worldnn
JSON
data: {n
data: "msg": "Hello world",n
data: "id": 12345n
data: }nn

Format des messages
Utilisation des IDs
id: 12345n
data: {"user": "goldo", "msg": "Hello !"}nn

Utilisation des events
data: {"msg": "Hello !"}nn
event: loginn
data: {"user": "goldo"}nn
event: updaten
data: {"user": "goldo", "status": "away"}nn

Avantages

Reconnexion automatique
Ids
Events

HTML 5 stockage local & synchronisation

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie HTML 5 stockage local & synchronisation

Ähnlich wie HTML 5 stockage local & synchronisation (20)

Mehr von goldoraf

Mehr von goldoraf (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML 5 stockage local & synchronisation

Hinweis der Redaktion