10 HTML5 APIs Worth Looking Into

Share this article

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.

Key Takeaways

  • The High Resolution Time API provides the current time in sub-millisecond resolution, allowing for accurate tests of the performance of code.
  • The User Timing API allows for accurate measurement and reporting of the performance of a section of JavaScript code.
  • The Navigation Timing API provides detailed timing information throughout the page load process, aiding in troubleshooting slow page loads.
  • The Network Information API helps discover the type of connection a user is on, allowing for the adjustment of page behavior to better accommodate the user.
  • The WebSocket API allows for the creation of real-time applications by establishing socket connections between the browser and the server.

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

What are the key differences between HTML5 APIs and JavaScript APIs?

HTML5 APIs and JavaScript APIs are both sets of programming interfaces used in web development. However, they differ in their functionalities and use cases. HTML5 APIs are built into web browsers and provide developers with native methods to perform tasks like drawing graphics, storing data offline, and handling multimedia. On the other hand, JavaScript APIs are often used to interact with HTML and CSS, manipulating web page elements, handling events, and creating animations.

How can I use the Geolocation API in HTML5?

The Geolocation API is a powerful HTML5 API that allows you to retrieve the geographical location of a user. To use it, you first need to check if the user’s browser supports it using the ‘navigator.geolocation’ property. If supported, you can then use the ‘getCurrentPosition()’ method to get the user’s current position. Remember to handle errors and ask for the user’s permission before accessing their location.

What is the purpose of the Web Storage API in HTML5?

The Web Storage API provides a way to store data persistently in a user’s browser. Unlike cookies, which are sent with every HTTP request and have size limitations, the Web Storage API allows for much larger amounts of data to be stored locally. This can improve performance for web applications that need to store large amounts of data, such as user preferences or application state.

How can I use the Canvas API to draw graphics?

The Canvas API provides a means for drawing graphics via JavaScript and the HTML ‘canvas’ element. To draw on the canvas, you need to get a reference to its drawing context using the ‘getContext()’ method, and then call drawing functions on that context. You can draw shapes, text, images, and even apply transformations and animations.

What is the role of the File API in HTML5?

The File API provides a standard way to interact with files on the user’s file system. It allows web applications to read and manipulate files, making it possible to upload files, read file metadata, and even read file contents. This can be useful for tasks like image previews, file uploads, or client-side file processing.

How can I use the WebSocket API for real-time communication?

The WebSocket API provides a full-duplex communication channel over a single socket. It’s ideal for real-time applications like chat, multiplayer games, or live updates. To use it, you create a new WebSocket object, providing the URL of the server. You can then send data using the ‘send()’ method and listen for incoming data using the ‘onmessage’ event handler.

What is the purpose of the History API in HTML5?

The History API provides a way to manipulate the browser history using JavaScript. This can be useful for creating single-page applications with navigable URLs. The History API allows you to add, replace, and remove entries from the browser history, as well as to move back and forth through the history stack.

How can I use the Drag and Drop API in HTML5?

The Drag and Drop API provides a way to handle drag and drop operations in your web applications. You can make an element draggable by setting its ‘draggable’ attribute to true. You can then use the ‘ondragstart’, ‘ondragover’, and ‘ondrop’ event handlers to control what happens when the user starts dragging an element, drags it over another element, and drops it.

What is the role of the Audio and Video API in HTML5?

The Audio and Video API in HTML5 provides a standard way to embed audio and video in web pages without the need for plugins. It also provides methods, properties, and events to control the playback of audio and video, such as play, pause, volume control, and tracking playback progress.

How can I use the Notification API in HTML5?

The Notification API allows you to display desktop notifications to the user. To use it, you first need to check if the user’s browser supports it and ask for the user’s permission. If granted, you can then create a new Notification object, providing the title and options like body text, icon, and sound.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

battery status apidom apigetUserMediahtml5 apinetwork information apiwebsocket
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week