HTML5 introduces several new APIs including Geolocation, History, and offline storage. The Geolocation API allows websites to access a user's location with their permission. The History API provides methods to modify browser history programmatically. Offline storage options in HTML5 include Web Storage, IndexedDB, and WebSQL for client-side storage of data without an internet connection.
2. HTML5 STANDARDS
W3C – World Wide Web Consortium
WHATWG – Web Hypertext Application
Technology Working Group
http://upload.wikimedia.org/wikipedia/commons/f/f7/HTML5-APIs-and-related-technologies-by-SergeyMavrody.png
3. ESTIMATION
2012
HTML 5.0
Candidate Rec
HTML 5.1
2013
Call for Review
1st Working Draft
HTML 5.2
http://en.wikipedia.org/wiki/HTML5#New_APIs
2014
2015
2016
Recommendation
Last Call
Candidate Rec
1st Working Draft
Recommendation
5. LOCATION
o
o
o
Effort of W3C to standardise an interface for
geolocation information on the client side
Gives ECMAScript set of object defining location
Uses location information servers
o
o
o
o
o
o
IP address
WiFi MAC network
Bluetooth MAC address
RFID
GPS
GSM/CDMA cell IDs
6. LOCATION COMAPTIBILITY
o
HTML5
Geolocation API support
IE
9.0+
o
3.5+
Safari
5.0+
Chrome
5.0+
Opera
10.6+
iPhone
3.0+
Android
2.0+
Polyfills
o
o
Firefox
https://github.com/Modernizr/Modernizr/wiki/HTML5
-Cross-browser-Polyfills#geo-location
Geolocation API / Skyhook / Navizon / Xtify /
Maxmind
7. LOCATION SOURCE
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// no native support; maybe try a fallback?
}
}
8. LOCATION OBJECT
Position Object
Property
Type
Notes
coords.latitude
double
decimal degrees
coords.longitude
double
decimal degrees
coords.altitude
double or null
meters above the reference ellipsoid
coords.accuracy
double
meters
coords.altitudeAccuracy
double or null
meters
coords.heading
double or null
degrees clockwise from true north
coords.speed
double or null
meters/second
DOMTimeStamp
like a Date() object
timestamp
9. LOCATION WHERE I AM?
http://en.wikipedia.org/wiki/File:Latitude_and_Longitude_of_the_Earth.svg
http://www.satsig.net/world105.gif
11. HISTORY
o
o
o
Access to browser history
HTML5 – manipulate history contents stack
Ensure URLs are resource identifiable
history.pushState support
IE
·
Firefox
4.0+
Safari
5.0+
Chrome
8.0+
Opera
11.50+
iPhone
4.2.1+
Android
·
12. HISTORY TRAVEL
Moving forward and backward
window.history.back();
window.history.forward();
o
Moving to a specific point in history
window.history.go(-1);
window.history.go(1);
o
13. HISTORY CHANGE
Adding and modifying history entries
history.pushState();
history.replaceState();
o
window.history.pushState({'one':'1','two':'2'},
'History', '/history');
https://developer.mozilla.org/en/docs/DOM/Manipulating_the_browser_history
15. OFFLINE STORAGE OPTIONS
o
Storage Options
o
Web Storage
o
http://code.google.com/p/sessionstorage/
IndexedDB
o WebSQL
o
o
Why?
o
o
o
o
o
Store dynamic data
Store static resources
Store binary data
Sync data with server
Increase application performance
16. WEB STORAGE
o
o
Similar to cookies with enhanced capacity
Two storage areas
local storage as persistent cookies (per domain)
o session storage as session cookies
o
o
o
o
About 5MB capacity
Only client-side access
Good programmatic interface – key/value pair
17. WEB STORAGE & DEMO
Session storage
// Store value on browser for duration of the session
sessionStorage.setItem('session_key', 'session_value');
// Retrieve value (gets deleted when browser is closed and reopened)
sessionStorage.getItem('session_key');
Local storage
// Store value on the browser beyond the duration of the
session
localStorage.setItem('local_key', 'local_value');
// Retrieve value (works even after closing and re-opening the
browser)
localStorage.getItem('local_key');
<Storage>.removeItem();
<Storage>.clear();
http://en.wikipedia.org/wiki/Web_Storage
18. INDEXEDDB
o
o
o
o
Local database for hierarchical objects (structure)
Handle simultaneous data operations
(transactions)
Chrome and Firefox support; other browser
vendors
More on: https://developer.mozilla.org/enUS/docs/IndexedDB
19. WEBSQL
o
o
o
o
RDBMS like data storing
Supported by add-on extensions
W3C Web Applications Working Group ceased
working on the specification in November 2010
Use Lawnchair - http://brian.io/lawnchair/
http://en.wikipedia.org/wiki/Web_SQL_Database