10 HTML5 APIs Worth Looking Into

The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a number of useful features in new APIs that you may not have delved into yet, likely because of the lack of browser support. In this post, we’ll take a look at 10 HTML5 APIs that cover a whole slew of functionality and features that can help you create interactive websites, test the performance of your code, interact with a user’s device, and much more. And as you’ll see, support for these features is probably a lot better than you might think.

1. High Resolution Time API

The High Resolution Time API provides the current time in sub-millisecond resolution and such that it is not subject to system clock skew or adjustments. It exposes only one method, that belongs to the window.performance object, called now(). It returns a DOMHighResTimeStamp representing the current time in milliseconds. The timestamp is very accurate, with precision to a thousandth of a millisecond, allowing for accurate tests of the performance of our code. The most important feature of this method is that performance.now() is monotonically increasing (that is, it increases consistently), so the difference between two calls will never be negative. The browsers that support the API are IE10, Opera 15, and Firefox 15+ without prefix. Chrome supports this API from version 20 with its “webkit” prefix, and without the prefix from version 24. More on the compatibility here. A basic example of calling this method is shown below:

var time = performance.now();

Below is a demo for you to experiment with:

See the Pen HuDAx by SitePoint (@SitePoint) on CodePen.

To learn more about this API, you can read one of my previous articles, Discovering the High Resolution Time API.

2. User Timing API

Another API created for testing the performance of our code is the User Timing API. With the High Resolution Time API, we can retrieve the current time in sub-millisecond resolution but it leaves us with the pain of introducing a bunch of variables in our code. The User Timing API solves this and other problems. It allows us to accurately measure and report the performance of a section of JavaScript code. It deals with two main concepts: mark and measure. The former represents an instant (timestamp), while the latter represents the time elapsed between two marks. This API exposes four methods, all belonging to the window.performance object, that allow us to store and delete marks and measures. The mark(name) method is used to store a timestamp with an associated name, while measure(name[, mark1[, mark2]]) can be used to store the time elapsed between two marks with the provided name. The desktop and mobile browsers that support the User Timing API are IE10+, Chrome 25+, and Opera 15+. Here is a basic example of the use of this API:

performance.mark("startFoo");
// A time consuming function
foo();
performance.mark("endFoo");

performance.measure("durationFoo", "startFoo", "endFoo");

Here’s a demo:

See the Pen iLnAI by SitePoint (@SitePoint) on CodePen.

For more info, take a look at my article Discovering the User Timing API.

3. Navigation Timing API

Page load time is one of the most important aspects of the user experience. Unfortunately, troubleshooting a slow page load is not easy because there are many contributing factors. To help with this, in addition to the APIs considered above, the W3C have proposed the Navigation Timing API. This API offers detailed timing information throughout the page load process accessible through the timing property of the window.performance object. In detail, it provides measurements related to page redirects, DNS lookup, time spent building the DOM, TCP connection establishment, and several other metrics. The Navigation Timing API is currently supported in IE9+, Firefox 7+, Opera 15+, and Chrome 6+. For a demonstration of this API, see this page. For more info, check out Colin Ihrig’s article Profiling Page Loads with the Navigation Timing API.

4. Network Information API

Do you think we’re done with performance stuff? No way! Performance is one of most important concept to focus on today. Even Google has set performance as one of the main goals to achieve in 2014, according to Google Chrome programmer Eric Seidel. Another API that deals with performance is the Network Information API. It helps you discover whether the user is on a metered connection, such as pay-as-you-go, and provides an estimate of bandwidth. Thanks to this information, it’s possible to change the behaviour of our pages to accommodate a user in the best way possible. For example, we could conditionally load images, videos, fonts and other resources based on the type of connection detected. This API belongs to the connection property of the window.navigator object. It exposes two read-only properties: bandwidth and metered. The former is a number representing an estimation of the current bandwidth, while the latter is a Boolean whose value is true if the user’s connection is subject to limitation and bandwidth usage, and false otherwise. Currently only Firefox 12+ and Chrome (mobile only) offer experimental support using their respective vendor prefix. You can view an on-page demo of this API on csskarma. For more info, see Craig’s article, How to Use the Network Information API to Improve Responsive Websites.

5. Vibration API

Another key concept that gets a lot of attention in our industry is user experience (UX). One of the APIs proposed that allows us to enhance this aspect of our websites is the Vibration API. This API is designed to address use cases where touch-based feedback is required, and offers the ability to programmatically produce a vibration interacting with the mobile device’s built-in vibration hardware component. If such a component doesn’t exist, it does nothing. The Vibration API is particularly useful if you’re working with online videos or web games. For example, you could let the user’s device vibrate during the progress of the game in reaction to a particular event. It exposes only one method, vibrate(), that belongs to the window.navigator object. This method accepts one parameter specifying the duration of the vibration in milliseconds. The parameter can be either an integer or an array of integers. In the second case, it’s interpreted as alternating vibration times and pauses. This API is supported in Chrome 30+, Firefox 11+, and Opera 17+. A basic use of this API is shown below:

// Vibrate once for 2 seconds
navigator.vibrate(2000);

For a demonstration, visit this page in a supporting device. For more on this API, take a look at The Buzz About the Vibration API and How to Use the HTML5 Vibration API.

6. Battery Status API

The Vibration API isn’t the only one that allows access to a device’s hardware. Another API of this type, designed with mobile devices in mind, is the Battery Status API. It allows you to inspect the state of a device’s battery and fires events about changes in battery level or status. The Battery Status API exposes four properties (charging, chargingTime, discharingTime, and level) and four events. The properties specify if the battery is in charge, the seconds remaining until the battery is fully charged, the seconds remaining until the battery is fully discharged, and the current level of the battery. These properties belongs to the battery property of the window.navigator object. The use cases for this API are really interesting. For example, if we detect the battery is low, we could slow down or stop Ajax requests that might be occurring on a page automatically at specific intervals. Another example is to disable non-critical CSS3 and JavaScript animations, or to save data more frequently to prevent data loss when the battery reaches a critical level. Currently only Firefox desktop and mobile support this API. A basic example of retrieving the current level of the battery in percentage is shown below:

// Retrieves the percentage of the current level of the device's battery
var percentageLevel = navigator.battery.level * 100;

Again, here’s a demo, which will work only on a supporting device:

See the Pen bFuvg by SitePoint (@SitePoint) on CodePen.

For more info, see Introducing the Battery Status API and How to Use the HTML5 Battery Status API

7. Page Visibility API

The Page Visibility API enables us to determine the current visibility state of the page. What this means is that we’re able to detect if our page is in the background or minimized (i.e. it’s not the currently-focused window). This capability can help us to develop powerful, yet CPU and bandwidth efficient web applications. In fact, we can slow down or even stop a CPU and/or bandwidth consuming process if we detect the user isn’t using the page. This API exposes one event, called visibilitychange, that we can listen for to detect changes in the state of the page’s visibility, and two read-only properties, hidden and visibilityState. These properties belong to the document object. hidden is a Boolean whose value is true if the page is not visible, and false otherwise. visibilityState is an enumeration that specifies the current state of the document and consists of the following values: hidden, visible, prerender, and unloaded. The desktop browsers that support this API are Chrome 13+, Internet Explorer 10, Firefox 10+, Safari 7, and Opera 12.10 (source). The mobile browsers that support the API are Chrome on Android 4.0+ and Opera Mobile 12.1+ on both Android and Symbian (source). Below is a demo:

See the Pen hcKxd by SitePoint (@SitePoint) on CodePen.

For more on this API, see my article Introduction to Page Visibility API.

8. Fullscreen API

The Fullscreen API provides a way to request fullscreen display from the user, and exit this mode when desired. This API exposes two methods, requestFullscreen() and exitFullscreen(), allowing us to request an element to become fullscreen and to exit fullscreen. It also exposes two properties, fullScreenElement and fullScreenEnabled, belonging to the document object. These specify the element that has been pushed to fullscreen and if fullscreen mode is currently enabled. It also exposes one event, fullScreenEnabled, which provides us a convenient way to listen for when fullscreen mode has been enabled or disabled. The Fullscreen API is supported by all the major browsers, specifically: Internet Explorer 11+, Firefox 10+, Chrome 15+, Safari 5.1+, and Opera 12.10+ (source). For a demonstration of this API, see this page. For more info, check out Craig’s article, How to Use the HTML5 Full-Screen API (Again), from which the demo is taken.

9. getUserMedia API

The getUserMedia API provides access to multimedia streams (video, audio, or both) from local devices. This means that we can access these streams without the use of Flash or Silverlight. Some use cases for this API include real-time communication and tutorials or lesson recording. The getUserMedia API exposes just one method called getUserMedia(). It belongs to the window.navigator object and accepts as its parameters an object of constraints, a success callback, and a failure callback. The getUserMedia API also allows us to have a lot of control over the requested stream. For example, we can choose to retrieve a video source at high resolution or at low resolution. The desktop browsers that support this API are Chrome 21+ (with -webkit prefix), Firefox 17+ (with -moz prefix), and Opera 18+. On mobile, it’s supported in Chrome 32+, Firefox 26+, and Opera 12+ (source). To see a demo, visit this page in a supporting browser. For more info, see my article An Introduction to the getUserMedia API.

10. WebSocket API

The WebSocket API allows developers to create real-time applications by establishing socket connections between the browser and the server. This means we can establish a persistent connection between the client and the server that can exchange data at any time. In order to communicate using the WebSocket protocol, you need to create a WebSocket object. As soon as the object is instantiated, the API tries to establish a connection. The WebSocket API provides two methods: send(), to send data to the server, and close(), to close the connection. It also provides several attributes, some of which are event listeners. This means that we can assign them a function that is executed when an event is fired. Examples of events include an error occurring or a message arriving from the server. The WebSocket API is supported by all major browsers, specifically IE10+, Firefox 4+ (full support from version 6), Chrome 4+ (full support from version 14), Safari 5+ (full support from version 6), and Opera 11+ (full support from version 12.10), (source). You can read more on this API in Sandeep Panda’s article Introduction to the HTML5 WebSockets API.

Conclusion

In this article I’ve given an overview, along with some demonstrations, of many of the APIs introduced in HTML5 in recent years. As you can see, many of them have pretty decent browser support. I hope this summary and the accompanying sources and demos can give you some incentive to build something cool with these new features. If you’ve used any of these, let us know about your experience in the comments.

Frequently Asked Questions (FAQs) about HTML5 APIs