html5 features: location, history and offline apps

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/