HTML5 storage and communication - Zohar Arad
-
Upload
israeli-internet-association-technology-committee -
Category
Documents
-
view
2.737 -
download
1
description
Transcript of HTML5 storage and communication - Zohar Arad
![Page 1: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/1.jpg)
Storage and Communication with HTML5Zohar Arad. March 2011
[email protected] | www.zohararad.com
1Saturday, March 26, 2011
![Page 2: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/2.jpg)
We’re going to talk about
Cross-Origin Resource Sharing
Cross-Window message passing
Persistent data storage with localStorage
Persistent data storage with SQLite
2Saturday, March 26, 2011
![Page 3: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/3.jpg)
Cross-Origin Resource SharingThe evolution of XHR
3Saturday, March 26, 2011
![Page 4: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/4.jpg)
In the good ol’ days...
We had XHR (Thank you Microsoft)
We could make requests from the client to the server without page reload
We were restricted to the same-origin security policy - No cross-domain requests
4Saturday, March 26, 2011
![Page 5: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/5.jpg)
This led to things like
JSONP
Flash-driven requests
Server-side proxy
Using iframes (express your frustration here)
5Saturday, March 26, 2011
![Page 6: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/6.jpg)
Thankfully,these days are (nearly) gone
6Saturday, March 26, 2011
![Page 7: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/7.jpg)
Say Hello to CORS
7Saturday, March 26, 2011
![Page 8: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/8.jpg)
CORS is the new AJAX
Cross-domain requests are allowed
Server is responsible for defining the security policy
Client is responsible for enforcing the security policy
Works over standard HTTP
8Saturday, March 26, 2011
![Page 9: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/9.jpg)
CORS - Client Side
var xhr = new XMLHttpRequest();
xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’, true);
xhr.onload = function(){ //instead of onreadystatechange
//do something
};
xhr.send(null);
9Saturday, March 26, 2011
![Page 10: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/10.jpg)
Someone has to be different
10Saturday, March 26, 2011
![Page 11: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/11.jpg)
CORS - Client Side (IE)
var xhr = new XDomainRequest();
xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’);
xhr.onload = function(){ //instead of onreadystatechange
//do something
};
xhr.send();
11Saturday, March 26, 2011
![Page 12: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/12.jpg)
CORS - Client Side API
abort() - Stop request that’s already in progress
onerror - Handle request errors
onload - Handle request success
send() - Send the request
responseText - Get response content
12Saturday, March 26, 2011
![Page 13: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/13.jpg)
CORS - Access Control Flow
The client sends ‘Access-Control’ headers to the server during request preflight
The server checks whether the requested resource is allowed
The client checks the preflight response and decides whether to allow the request or not
13Saturday, March 26, 2011
![Page 14: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/14.jpg)
CORS - Server Side
Use Access-Control headers to allow
Origin - Specific request URI
Method - Request method(s)
Headers - Optional custom headers
Credentials - Request credentials (cookies, SSL, HTTP authentication (not supported in IE)
14Saturday, March 26, 2011
![Page 15: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/15.jpg)
CORS - Server SideAccess-Control-Allow-Origin: http://www.somesite.com/some_resource
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 84600
Access-Control-Allow-Credentials: true
15Saturday, March 26, 2011
![Page 16: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/16.jpg)
CORS - Recap
Client sends a CORS request to the server
Server checks request headers for access control according to URI, method, headers and credentials
Server responds to client with an access control response
Client decides whether to send the request or not
16Saturday, March 26, 2011
![Page 17: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/17.jpg)
CORS - Why should you use it?
It works on all modern browser (except IE7 and Opera)
It doesn’t require a lot of custom modifications to your code
Its the new AJAX (just like the new Spock)
You can fall back to JSONP or Flash
Using CORS will help promote it
Works on Mobile browsers (WebKit)
17Saturday, March 26, 2011
![Page 18: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/18.jpg)
Cross-Window MessagingLook Ma, no hacks
18Saturday, March 26, 2011
![Page 19: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/19.jpg)
Posting messages between windows
We have two windows under our control
They don’t necessarily reside under the same domain
How can we pass messages from one window to the other?
19Saturday, March 26, 2011
![Page 20: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/20.jpg)
We used to hack it away
Change location.hash
Change document.domain (if subdomain is different)
Use opener reference for popups
Throw something really heavy, really hard
20Saturday, March 26, 2011
![Page 21: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/21.jpg)
No more evil hackspostMessage brings balance to the force
21Saturday, March 26, 2011
![Page 22: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/22.jpg)
Message passing
Evented
Sender / Receiver model
Receiver is responsible for enforcing security
22Saturday, March 26, 2011
![Page 23: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/23.jpg)
postMessage - Receiver
window.addEventListener(“message”,onMessage,false);
function onMessage(e){if(e.origin === ‘http://www.mydomain.com’){ console.log(‘Got a message’,e.data);}
}
23Saturday, March 26, 2011
![Page 24: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/24.jpg)
postMessage - Sender
top.postMessage(‘Hi from iframe’, ‘http://www.mydomain.com’);
24Saturday, March 26, 2011
![Page 25: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/25.jpg)
postMessage - Sending to iframes
var el = document.getElementById(‘my_iframe’);
var win = el.contentWindow;
win.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);
25Saturday, March 26, 2011
![Page 26: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/26.jpg)
postMessage - Sending to popup
var popup = window.open(......);
popup.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);
26Saturday, March 26, 2011
![Page 27: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/27.jpg)
When should you use it?
Browser extensions
Embedded iframes (if you must use such evil)
Flash to Javascript
27Saturday, March 26, 2011
![Page 28: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/28.jpg)
Local Persistent StorageGoodbye Cookies
28Saturday, March 26, 2011
![Page 29: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/29.jpg)
Local Storage
Persistent key / value data store
Domain-specific
Limited to 5MB per domain
Not part of request
Completely cross-platform (yes, even IE7)
29Saturday, March 26, 2011
![Page 30: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/30.jpg)
localStorage - Basics
var s = window.localStorage;
s[‘somekey’] = ‘Some Value’;
console.log(s[‘somekey’];
30Saturday, March 26, 2011
![Page 31: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/31.jpg)
localStorage - API
getItem( key ) - get an item from data store
setItem( key, value ) - save item to data store
removeItem( key ) - remove item from data store
clear() - remove all items from data store
31Saturday, March 26, 2011
![Page 32: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/32.jpg)
localStorage - API
Or you can use Javascript array notation:
var s = window.localStorage;s.myItem = “My Value”;
delete s.myItem;
32Saturday, March 26, 2011
![Page 33: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/33.jpg)
localStorage - Internet Explorer 7
var storage = document.createElement(‘var’);storage.style.behaviour = “url(‘#default#userData’)”;
var b = document.getElementsByTagName(‘body’)[0];b.appendChild(storage);
33Saturday, March 26, 2011
![Page 34: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/34.jpg)
localStorage - Internet Explorer 7
//setting a valuevar now = new Date();now.setYear(now.getYear() + 1);var expires = now.toUTCString();
storage.setAttribute(“name”,”zohar”);storage.expires = expires;storage.save(“my_data_store”);
34Saturday, March 26, 2011
![Page 35: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/35.jpg)
localStorage - Internet Explorer 7
//getting a value
storage.load(“my_data_store”);var v = storage.getAttribute(“name”);
//removing a valuestorage.removeAttribute(“name”);storage.save(“my_data_store”);
35Saturday, March 26, 2011
![Page 36: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/36.jpg)
localStorage - Internet Explorer 7
See http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx for a complete API reference
IE7 localStorage (data persistence) is limited to 128KB
36Saturday, March 26, 2011
![Page 37: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/37.jpg)
Web Storage with SQLiteTransactional offline data store
37Saturday, March 26, 2011
![Page 38: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/38.jpg)
Web Storage
Transactional
Data-type aware
Supports complex data structures
No size limit
Works on WebKit, Opera (SQLite) and Firefox 4 (IndexedDB)
38Saturday, March 26, 2011
![Page 39: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/39.jpg)
Web Storage - Why should you use it?
Browser-specific solutions (like extensions / apps)
Mobile browsers ?
Optimized data caching for offline access (did anyone say mobile?)
Transactional operations
39Saturday, March 26, 2011
![Page 40: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/40.jpg)
Web Storage - WebKit Example
//create a DB and connect
var name = “app_db”;var desc = “My Application DB”;var ver = “1.0”;var size = 10 * 1024 * 1024; // 10MBvar db = openDatabase(name,ver,desc,size);
40Saturday, March 26, 2011
![Page 41: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/41.jpg)
Web Storage - WebKit Example
// create a table
db.transaction(function (tx) { tx.executeSql(‘CREATE TABLE foo (id unique, text)’);});
41Saturday, March 26, 2011
![Page 42: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/42.jpg)
Web Storage - WebKit Example
// insert some data
db.transaction(function (tx) { tx.executeSql(‘insert into foo (text) values ( ? )’,[“Hi There”]);});
42Saturday, March 26, 2011
![Page 43: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/43.jpg)
Web Storage - WebKit Example
// read some data
db.transaction(function (tx) { tx.executeSql(‘select * from foo where id > ?’, [10], function(tx,results){
var data = {};for (var i = 0; i < results.rows.length; i++) { var row = results.rows.item(i); data[row.id] = row.text;}someCallback(data);
});});
43Saturday, March 26, 2011
![Page 44: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/44.jpg)
Web Storage - WebKit Example
// handle errors
db.transaction(function (tx) { tx.executeSql(‘select * from foo where id > ?’, [10], function(tx,results){ //... handle success },
function(tx, errors){ //handle errors } );});
44Saturday, March 26, 2011
![Page 45: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/45.jpg)
Resources
IndexedDB
http://www.html5rocks.com/tutorials/indexeddb/todo/
https://developer.mozilla.org/en/IndexedDB/IndexedDB_primer
Web SQL - http://www.html5rocks.com/tutorials/offline/storage/
CORS - http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
Local Storage - http://html5tutorial.net/tutorials/working-with-html5-localstorage.html
45Saturday, March 26, 2011
![Page 46: HTML5 storage and communication - Zohar Arad](https://reader033.fdocuments.net/reader033/viewer/2022051513/54625864af7959a4058b49c5/html5/thumbnails/46.jpg)
Demo & Questions
Download demo from http://zohararad.com/sandbox/cors.zip
gem install padrino
padrino start
46Saturday, March 26, 2011