The Interesting Things The Web APIs Can Do Today


What is Web API?

A Web API is an application programming interface for either a web server or a web browser. It is a web development concept, usually limited to a web application’s client-side (including any web frameworks being used), and thus usually does not include web server or browser implementation details such as SAPIs or APIs unless publicly accessible by a remote web application

Nowadays we can access Battery information, Geolocation & Geo-fencing information, Speech to text, and text to speech. We will see in this article how can we use those Web APIs in our application. Since Web APIs are written usually in JavaScript we don’t need any special conversion to use Web APIs. we can write it as a normal JavaScript function without any special imports.


Local Notifications

Display or schedule a notification using a web browser on both Desktop and Mobile phones. The interface name is Notification.

Requesting Notification Permission

Our website must have permission to display the notifications to users. So we need to make sure that we have the permission by requesting it again.


Display a Notification message

New Notification

Notification Events

The notification constructor will return a notification object. There will be some events like on-click, events. We can use them to trigger some scripts based on the events.

Geo Location

Our JavaScript application can access our precious location using Web APIs.

Geo Location

The locations can also be watched by the script in the background. We can add event listeners using the Geolocation.watchPosition function. It will trigger whenever the device location is changed.

Text to Speech

We will install third-party plugins or use google text to speech plugin for our web application when we need it. But we really do not need google’s text to speech API for this while we can use this feature using Web APIs alone. The interface name is SpeechSynthesis.


This example will speak the give message. We have multiple voices to choose.


Get voice Array from the getVoices function and assign the voice to use to your object.


This feature is no longer recommended as it is depreciated in web standards. Though most of our browsers support this today.

Battery Information

We can collect battery information such as battery charging status, current battery level, and battery discharging time. Here you can find the example for getitng battery details.


Battery Events

We can trigger some functions when the battery state is changed. These are some events that you can find in the below example code.

Get Battery

We can use these features to improve the power of our web application. All technologies are rapidly growing up. Recently Angular also released a new feature called Hot Module Replacement which helped a lot during the development. You can read in detail about it here.