HTML5 APIs

• 1.
• Next
• Bottom

HTML Geolocation API

Used to locate user's position.

🚴 w3schools Geolocation API

Since this can compromise privacy, the position is not available unless the user approves it.

📝 Note: Geolocation is most accurate for devices with GPS, like smartphones.

📝 Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

getCurrentPosition() method is used to return the user's position.

var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}

What above example shows:

• Check if Geolocation is supported
• If supported, run the getCurrentPosition() method. If not, display a message to the user
• If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
• The showPosition() function outputs the Latitude and Longitude

from: MDN Web Docs
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
🚴 MDN Web Docs Geolocation

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

To display the result in a map, you need access to a map service, like Google Maps.

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

getCurrentPosition() Method - Return Data

Returns an object on success.

• 3.
• Top
• Prev
• Next
• Bottom

HTML Web Storage API

😲 Better than cookies!!

Web applications can store data locally within the user's browser.

Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

The storage limit is far larger than cookies - at least 5MB - and information is never transferred to the server.

Web storage is per origin - per domain and protocol. All pages, from one origin, can store and access the same data.

HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session - data is lost when the browser tab is closed

Before using web storage, check browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

localStorage Object

Stores the data with no expiration date.
The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Create a localStorage name/value pair with name="lastname" and value="Smith"
Retrieve the value of lastname and insert it into the element with id="result"

or:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for removing the lastname localStorage item is as follows:
localStorage.removeItem("lastname");

📝 Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

sessionStorage Object

Equal to the localStorage object, except that it stores the data for only one session.

😲 The data is deleted when the user closes the specific browser tab.

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

• 5.
• Top
• Prev
• Bottom

HTML SSE API

Server-Sent Events (SSE) allow a web page to get updates from a server.

📚 w3schools SSE API

Server-Sent Events - One Way Messaging
A server-sent event is when a web page automatically gets updates from a server.

This was possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples:

• Facebook updates
• Twitter updates
• stock price updates
• news feeds
• sport results

Receive Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

1. Create a new EventSource object, and specify the URL of the page sending the updates - in this example demo_sse.php
2. Each time an update is received, the onmessage event occurs
3. When an onmessage event occurs, put the received data into the element with id="result"

1. Check Server-Sent Events Support

In the 📚 w3schools Try it Yourself example associated with the above code chunk, there were some extra lines of code to check browser support for server-sent events.

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

2. Server-Side Code Example

For the example above to work, the server has to be capable of sending data updates - like PHP or ASP.

The server-side event stream syntax is simple. Set the:
Content-Type
header to:
text/event-stream

Event Streams can now be started.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Code explained:

1. Set the Content-Type header to text/event-stream
2. Specify that the page should not cache
3. Output the data to send Always start with "data: "
4. Flush the output data back to the web page

The EventSource Object
In the examples above the onmessage event is used to get messages. But other events are also available:

• onopen When a connection to the server is opened
• onmessage When a message is received
• onerror When an error occurs

•  
• Top
• Prev