The HTML5 revolution has provided us some awesome JavaScript APIs. Some are APIs we knew we have needed for years, others are cutting edge mobile and desktop helpers. Irrespective of API strength or purpose, anything which can help us do our job in a better way is a step in the right direction. The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a numeral of useful features in new APIs.

In this post, we will take a look at some of the best APIs that cover a whole slew of functionality and features that can help you create interactive websites, test the code for performance, interact with a user’s device, and much more.

Best JavaScript APIs in HTML5 to Make Your Website Look Incredible

1. Media API

It is a part of the media element which includes two of HTML5’s children, the video, and audio elements. These elements are simple to implement but what’s less well known are the JavaScript methods available within the associated API. There are a number of methods including play() and pause() load() and canPlayType(). Combined with additional events and attributes the API allows us to create custom controls.

2. Drag and Drop

This API brings native drag and drop support to the browser. By adding a draggable attribute set to true, the user has the ability to move any element. You then add some event handlers on a target drop zone to tell the browser where the element can be dropped.

With this API, a user can easily drag an image from the desktop into the browser or you could create an icon that gets loaded with content when dragged out of the browser by the user to a new application target.

3. Offline Web Applications/Application Cache

With the blurring of native apps (mobile and desktop) and web apps comes the inevitable task of wanting to take the applications offline. The Offline Web Applications specification details will cover how to do it just using application caching.

Application caching can be performed by creating a simple manifest file which lists the files that are required for the application to work offline. Authors can then ensure their sites function offline. The manifest causes the user’s browser to keep a copy of the files for use offline later. Suppose when a user views the document/application without network access, the browser switches to use the local copies instead. So, it will allow you to finish writing important email or playing the web version of Angry Birds even when you are on the underground/subway.

4. User Interaction

Like offline, user interaction is part of the primary HTML5 specification. Some of its features, such as the contenteditable attribute, are extremely useful when you’re creating web applications. contenteditable has been around in Internet Explorer since version 5.5 and works in all five major browsers. Setting the attribute value to true indicates that the element is editable. Authors will then, be able to combine this with local storage to track all the changes to documents.

5. History

A browser’s back button is the most heavily used function. Using HTML5’s History API, developers have a lot more control over the history state of a user’s browser session.

The previous HTML5 History API allowed us to send users forward or back, and check the length of the history. What HTML5 brings are ways to add and remove entries in the user’s history, hold data to restore a page state and update the URL without refreshing the page.

6. Canvas 2D Context

It allows us draw in the browser. Usage of canvas without the 2D Context API we wouldn’t be able to draw. It’s our brushes, palette and paint all rolled into one. This API provides    objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.

7. Web Workers

It is an API for running JavaScript in the background independent of any user scripts. Allows for long running tasks to be completed without preventing the page from becoming unresponsive.

8. Web Storage

This specification defines an API for persistent data storage of key-value pair data in Web clients.

9. Web Sockets 

It allows pages to use the Web Socket protocol to send two-way messages between a browser and server.

10. Server-Sent Events

This API is used for opening an HTTP connection to receive push notifications from a server. These events are received as DOM events. This API is supposed to be used with Push SMS.

11. Geolocation

It is mainly used to provide web applications with scripted access to geographical location information of the hosting device.

12. Battery Status API

It allows you to inspect the state of a mobile device’s battery and fires events about changes in battery level or status. It consists of 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 belong to the battery property of the window.navigator object.

13. Fullscreen API

It provides a way to request fullscreen display from the user, and exit this mode when desired. It consists of two methods, requestFullscreen() and exitFullscreen(), allowing us to request an element to become fullscreen and to exit fullscreen. It also covers 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.

14. Page Visibility API

This API enables us to determine the current visibility state of the page. We can detect if our page is in the background or minimized. This capability can help us to develop powerfully, 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.

It covers one event, called visibilitychange, that can be used 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 specifies the current state of the document and consists of the following values: hidden, visible, prerender, and unloaded.

15. Vibration API

Another key concept which is important is user experience (UX). Vibration API is responsible for enhancing this aspect of our websites.

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.

It is useful if you are 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 covers only one method, vibrates (), that belongs to the window.navigator object. It accepts one parameter specifying the duration of the vibration in milliseconds.

In this blog, we learned about all the new JavaScript API referenced in HTML5 specification. We hope you have found this information useful. Keep in mind that these APIs will be used widely in a few years, so the sooner you get acquainted with them, the better you will be equipped to create world-class web applications. Take a few moments to explore these APIs and see what you can put together!