html5 features: location, history and offline apps
DESCRIPTION
Location, History and Offline AppsTRANSCRIPT
HTML5o Locationo Historyo Offline Apps
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-Sergey-Mavrody.png
ESTIMATION
http://en.wikipedia.org/wiki/HTML5#New_APIs
2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation
HTML 5.1 1st Working Draft Last Call Candidate Rec Recommendation
HTML 5.2 1st Working Draft
HTML5 BROWSERS COMPATIBILITY
http://html5test.com/results/desktop.html
LOCATIONo Effort of W3C to standardise an interface for
geolocation information on the client sideo Gives ECMAScript set of object defining
locationo Uses location information servers
o IP addresso WiFi MAC networko Bluetooth MAC addresso RFIDo GPSo GSM/CDMA cell IDs
LOCATION COMAPTIBILITY
o HTML5
o Polyfillso https://
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#geo-location
o Geolocation API / Skyhook / Navizon / Xtify / Maxmind
Geolocation API support
IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.5+ 5.0+ 5.0+ 10.6+ 3.0+ 2.0+
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? }}
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
timestamp DOMTimeStamp like a Date() object
LOCATION WHERE I AM?
http://en.wikipedia.org/wiki/File:Latitude_and_Longitude_of_the_Earth.svg
http://www.satsig.net/world105.gif
LOCATION DEMOo http://playground.html5rocks.com/#
get_current_positiono http://www.maxmind.com/en/geoip_demo
HISTORYo Access to browser historyo HTML5 – manipulate history contents stacko Ensure URLs are resource identifiable
history.pushState support
IE Firefox Safari Chrome Opera iPhone Android
· 4.0+ 5.0+ 8.0+ 11.50+ 4.2.1+ ·
HISTORY TRAVEL
o Moving forward and backwardwindow.history.back();window.history.forward();
o Moving to a specific point in historywindow.history.go(-1);window.history.go(1);
HISTORY CHANGE
o Adding and modifying history entrieshistory.pushState();history.replaceState();
window.history.pushState({'one':'1','two':'2'}, 'History', '/history');
https://developer.mozilla.org/en/docs/DOM/Manipulating_the_browser_history
HISTORY DEMO
http://html5demos.com/historyhttps://github.com/languages/JavaScript/most_watched
OFFLINE STORAGE OPTIONS
o Storage Optionso Web Storage
o http://code.google.com/p/sessionstorage/o IndexedDBo WebSQL
o Why?o Store dynamic datao Store static resourceso Store binary datao Sync data with servero Increase application performance
WEB STORAGE
o Similar to cookies with enhanced capacityo Two storage areas
o local storage as persistent cookies (per domain)o session storage as session cookies
o About 5MB capacityo Only client-side accesso Good programmatic interface – key/value
pair
WEB STORAGE & DEMOSession storage// Store value on browser for duration of the sessionsessionStorage.setItem('session_key', 'session_value');// Retrieve value (gets deleted when browser is closed and re-opened)sessionStorage.getItem('session_key');
Local storage// Store value on the browser beyond the duration of the sessionlocalStorage.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
INDEXEDDB
o Local database for hierarchical objects (structure)
o Handle simultaneous data operations (transactions)
o Chrome and Firefox support; other browser vendors
o More on: https://developer.mozilla.org/en-US/docs/IndexedDB
WEBSQLo RDBMS like data storingo Supported by add-on extensionso W3C Web Applications Working Group ceased
working on the specification in November 2010
o Use Lawnchair - http://brian.io/lawnchair/
http://en.wikipedia.org/wiki/Web_SQL_Database
OFFLINE APPS SUPPORTPolyfills
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/
MORE DEMOS
http://html5demos.com/ https://developer.mozilla.org/en-US/demos/ta
g/tech:html5 http://www.html5rocks.com/en/ chrome://quota-internals/
HTML5 APIs support http://caniuse.com/ http://mobilehtml5.org/