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.

1. HTML5
o
o
o
Location
History
Offline Apps

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

4. HTML5 BROWSERS COMPATIBILITY
http://html5test.com/results/desktop.html

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

10. LOCATION DEMO
o
o
http://playground.html5rocks.com/#get_current_p
osition
http://www.maxmind.com/en/geoip_demo

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

14. HISTORY DEMO
http://html5demos.com/history
https://github.com/languages/JavaScript/most_watc
hed

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

20. OFFLINE APPS SUPPORT

Polyfills
http://amplifyjs.com/
 https://github.com/marcuswestin/store.js
 http://yuilibrary.com/yui/docs/cache/#offline
 http://rezitech.github.com/stash/
 http://smus.com/game-asset-loader/


21. MORE DEMOS
http://html5demos.com/
 https://developer.mozilla.org/enUS/demos/tag/tech:html5
 http://www.html5rocks.com/en/
 chrome://quota-internals/

HTML5 APIs support
 http://caniuse.com/
 http://mobilehtml5.org/
