300 likes | 509 Views
Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 10 Geolocation , Offline Web Apps, and Web Storage (JavaScript Ahead). Geolocation. Where Am I?. Browsers can use IP addresses, network connections, cell tower information, and GPS to determine location
E N D
Neal Stublen nstublen@jccc.edu HTML5 and CSS3
Chapter 10Geolocation, Offline Web Apps, and Web Storage(JavaScript Ahead)
Where Am I? • Browsers can use IP addresses, network connections, cell tower information, and GPS to determine location • Web apps can request location information from the browser • Browsers will (should?) prompt the user before sharing location information
JavaScript to Access Location function determineLocation() { if (‘geolocation’ in navigator) { geo = navigator.geolocation; geo.getCurrentPosition(…); } else { // not supported } }
The Position Object • Position provides coordinates and a timestamp • Coordinates include latitude, longitude, and accuracy • Possibly altitude, heading, and speed
Example Location • W3Schools geolocation example: • http://www.w3schools.com/html/html5_geolocation.asp
Integrating Maps • Google Maps API • http://maps.google.com/maps/api/js • Place a map inside an element • Set a map location • Place a location marker on the map
Possible Uses? • Directions from the user’s current location • Find a store near you
Stay Connected with Users • Have the browser keep a local copy of your site • HTML, images, CSS, JavaScript • HTML5 Application Cache • Not the browser cache
Using cache.manifest CACHE MANIFEST # version 0.1 CACHE: index.html images/photo.jpg js/main.js NETWORK: *
Request Caching • Specify the cache.manifest file within the html element of each HTML file <!doctype html> <html manifest=“/cache.manifest”> • Browsers will confirm with the user before caching the site
Limitations • Browsers enforce storage limits • Policies vary by browser • Rely on fallback resources
Manifest Fallback Area • Any resources in the media folder will be replaced with a PNG image file FALLBACK: media/ images/ford-plane-still.png / /offline.html
Site Changes • Changes to the cache.manifest file trigger re-caching the site • Use a version comment in the manifest file to force re-downloading a site
Online Detection • JavaScript can be used to determine if the site is online or offline if (navigator.onLine) { // Online activity } else { // Offline activity }
Possible Uses • Compose messages offline and send them when connected • Download content for offline browsing • Work schedules, articles, reports • But where does that kind of dynamic content go?
Storing Data Locally • Store up to 5MB of data for your web site (W3C spec. suggestion) • Works well with offline web applications • Possible alternative to cookies
Session Storage • Specific to one window or tab • Isolated from other windows (even for the same site) • Lives only as long as the window or tab
Local Storage • Persists across sessions, tabs, and windows • Keep local data instead of repeatedly transferring it from servers
Storing Data • Data is stored as key-value pairs • The “key” is a name given to identify the data • “name”, “email”, “msg:4875963” • The “value” is the data you want to store • “John”, “john@example.com”, “You have been chosen to receive a special gift...”
JavaScript Accesses Storage localStorage.setItem(“name”, “John”); var name = localStorage.getItem(“name”); Or… localStorage[“name”] = “John”; var name = localStorage[“name”];
Accessing Web Storage • Browser restricts access based on the web address • JavaScript on microsoft.com cannot access Web Storage for google.com • Data is not shared between different browsers • However, it can probably be browsed (and edited) by the user from within the browser
Possible Uses • “Remember me” option to save an email address or user name • Shopping cart information • Online store browsing information
Web Workers • Execute scripts in the background • Longer running tasks that you don’t want to block the user from using the site
Web Sockets • Provides two-way communication with a remote site • Receive messages from a remote site • New mail, stock prices
Web SQL and IndexedDB • Local storage like you get with Web Storage • Indexed database queries • Less support than Web Storage • Web SQL no longer being updated