Html5 features: location, history and offline apps
Download as PPTX, PDF2 likes1,565 views
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.
Html5 features: location, history and 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
- 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
- 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/