HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
32 - Coding Additional HTML5 APIs
WHATWG is a consortium that was formed by Apple, the Mozilla Foundation, and Opera Software to define and document HTML5.
This organization is different from W3C. The WHATWG HTML5 specification includes the following additional APIs in its HTML5 specification:
- Geolocation
- Web Workers
- WebSockets
- File
Geolocation
The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user approves it.
The getCurrentPosition() method is used to return the user's position.
The example below returns the latitude and longitude of the user's position:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
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;
}
</script>
</body>
</html>
Web Workers
A web worker is a JavaScript running in the background, without affecting the performance of the page.
<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('doWork.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations");
};
function sayHello() {
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
doWork.js
onmessage = function (event) {
var info = event.data;
var result = 'Hello ' + info + ' everywhere';
postMessage(result);
};
WebSocket API
The WebSocket API creates a simultaneous two-way connection between a client and a Web server. This type of connection is called a socket, and it allows data to flow back and forth freely.
WebSockets are commonly used for real-time applications like chat, multiplayer online gaming, or sports score tickers.
There are three primary events that occur with WebSocket communication:
- onopen: when a socket opens
- onmessage: when a message is received from a Web server
- onclose: when a socket closes
A WebSocket that tests whether your browser supports WebSockets:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
alert("Your browser supports WebSockets.");
// Open a WebSocket
var socket = new
WebSocket("ws://localhost:9998/echo");
socket.onopen = function () {
// Connected, send data
socket.send("Connected"); alert("Connected.");
};
socket.onmessage = function (e) {
var received_msg = e.data;
alert("Message received.");
};
socket.onclose = function () {
// WebSocket closed
alert("Connection closed.");
};
}
else {
// Browser doesn't support WebSockets
alert("Your browser does not support WebSockets.");
}
}
</script>
</head>
<body>
<div>
<a href="javascript:WebSocketTest()">
Click to run
WebSocket demo
</a>
</div>
</body>
</html>
A second alert box should appear, stating that the connection is closed.
File API
The File API allows Web applications to upload files from local storage to remote servers.
The File API features several interfaces for accessing files, including:
- File: reads in a file as a URL
- FileList: permits upload of multiple files or a folder of files
- Blob: provides access to raw binary data
- FileReader: Provides methods to read and display a file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>File API Browser Support Check</title>
<script>
if (window.File && window.FileReader && window.FileList &&
window.Blob) {
alert('Hurray! This browser supports File APIs.');
} else {
alert('This browser does not fully support File APIs.');
}
</script>
</head>
<body>
</body>
</html>
