UI Development

Mobile JavaScript APIs


The APIs which will be helpful to deal with mobile specific hardware for implementing user friendly actions to the mobile user.


To identify the user’s location for showing nearest petrol filling station
To arrange a video conference
Increase/decrease brightness
Load the content automatically when network is available
To detect earth quakes
To use mobile as compass etc.


Now a days hybrid applications become more popular due to its fantastic behavior of

write once and accommodate multiple platforms“.
These Mobile JavaScript APIs are used in hybrid application development to access device specific hardware.


Below are the APIs available from native JavaScript language that allow us to access hardware components and sensors in our devices.

Vibration API:

Vibration API allows us to access the vibration motor of the mobile. Using the below code we can vibrate a device pragmatically.

Use case:  A person who is blind is accessing the website. While he is entering each key in the username field during sign in, we can make a vibration which helps him to understand that key has been pressed.

//line of code will make the mobile device to vibrate foe 1000ms or 1sec

// Vibrate in a pattern.

Native JavaScript language can access navigator object present in the browser. Using navigator object we can call vibration API.

Browser Support*:

Ambient Light API:

Ambient light API allows us to access the light sensors present in the mobile device. Using the below code we can increase/decrease the brightness of the screen.

Use case:  Many research suggested that blue light coming from mobile device at night time will harm the human eye. In order to reduce the effect we can develop cool feature Night mode. If any of the user is accessing our website at night time, based on the ambient light level detected by light sensor, we can make his/her screen less brighter to save their eyes from excess brightness.

if ('ondevicelight' in window) {
   window.addEventListener('devicelight', function(event) {
    var body = document.querySelector('body');
    if (event.value < 50) {
   } else {

The above code will change the brightness of screen based on the ambient light available.

Browser Support*:

Media Capture and Streams API:

Media capture API will allows us to access the user microphones/speakers and camera. Using the below code we can pragmatically access the device media.

Use case: We are developing a test/examination based website where we want to capture user audio and his actions. During the examination period, we can use of  Media capture API and achieve this.

//create constraints required and pass it to API method and get the access for microphone and video.
const constraints = { audio: true, video: true };
const stream = await navigator.mediaDevices.getUserMedia(constraints);

The below screenshots show that Media API make the browser to get permission from user for accessing the camera and microphone device.

Browser Support*:

Online API:

Online API will allows us to get the information regarding the network connected to the mobile device. Using below code we can identify whether device has internet or not.  The online event is fired when the browser has gained access to the network and the value of Navigator.onLine is true.

Use case:  We want to show a message to the user when he got connected back to internet, we can use the Online API.

// addEventListener to show online message
window.addEventListener('online', (event) => {
   document.getElementById(“warning”).innerHTML = "You are now connected to the network.";

Browser Support*:

Web Speech API :

Web speech API allows us to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)

Speech Synthesis:  This can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.

Use case: A person who is blind is accessing our website.he wants to read the content present on the mobile screen. Using speech synthesis API we can access the speech reader present in the device and make it read the content.

//get voices

Below is the URL where speech synthesis is implemented

Browser Support*:

Speech Recognition: This can be used to recognize the words that user spoken.

Use case:  We want to change the website background color based on user input,we can achieve this using Web speech API.

//create Object of Speech Recognition
var speechRecog = new SpeechRecognition();
speechRecog.onresult = function(event) {
var value = event.results[0][0].transcript;

Below is the URL which show above use case implemented

Browser Support*:

GeoLocation API:

Geolocation API allows us to know the information of the user’s location . Using the below line of code we can identify the user location.

Use case: We want to show nearest stores available to the user based on his location. Using the above API we can achieve this.

// Check support
if (navigator.geolocation) {
function success(position) {
   console.log('Latitude: ' + position.coords.latitude);
   console.log('Longitude: ' + position.coords.longitude);

Browser Support*:

Device Orientation and Device Motion API

This API will allows us to access the gyroscope sensor available in mobile device. Using this we can get the device position and rotation angle.

Use case: We want to develop a motion based game where based on device motion and orientation we want to design a game. Using this API we can achieve this.

if (window.DeviceOrientationEvent) {
     window.addEventListener('deviceorientation', function(eventData) {
          // gamma is the left-to-right tilt in degrees
          // beta is the front-to-back tilt in degrees
          // alpha is the compass direction the device is facing in degrees
     }, false);
window.addEventListener("devicemotion", handleMotionEvent, true);

function handleMotionEvent(event) {
   var x = event.accelerationIncludingGravity.x;
   var y = event.accelerationIncludingGravity.y;
   var z = event.accelerationIncludingGravity.z;
  alert(x + " " + " " + " " z);

Browser Support*:

Battery Manager API:

Battery Manager API allows us to know the battery status of the mobile device. Using below code we can access the device battery manager and get the details.

Use case: User device battery is low and he is he is going through our site. We want to show a message to the user that your battery is low and please charge it. We can implement this using below code.

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;if (navigator.getBattery) {
  } else if (battery) {
function logBattery(battery) {
//show a message if battery is less than 10%
if(battery.level < 0.1){
document.getElementByID(“warning”).innerHTML = “your battery is low and please charge your phone”

Browser Support*:

Proximity API:

Proximity API allows us to deal with proximity sensor present in the mobile device. Proximity sensor will detects if any object is near to mobile. “deviceproximity” sensor provides the information about the actual distance between the device and a nearby object, while the second event, “userproximity” only specifies if there is an object nearby.

Use case: If mobile is in user’s hand reduce the ring tone volume using proximity sensor

//To detect support for this API:
if ('ondeviceproximity' in window) {
   // API supported
   window.addEventListener('userproximity', function(event) {
      console.log( (event.near ? '' : 'no ') + 'object detected nearby');
} else {"No proximity API support");

Browser Support*:

Notification API:

Notification API allows us to show notifications to the user our of web page i.e. in notification panel. Using this we can create an instance of notification and show required notifications.

Use case: User has some out of stock items in cart. We can show a notification to the user when we got the item in stock using notification API.

if ('Notification' in window) {
   // API supported
   var notification = new Notification('In Stock', {
       body: 'your items are in stock now.Hurry up!'
} else {
  console.log("Not supported");

Browser Support*:

Screen Orientation and FullScreen API:

Screen orientation API allows us to know whether device is in portrait or landscape mode and also allows us to lock the orientation of device.

Use case: Based on the photo resolution we can change the orientation of screen from portrait to landscape and vice versa.

if ("orientation" in screen) {
    // change to landscape
   screen.orientation.lock("landscape-primary ");
   // go back to portrait

Full Screen API allows user to see the current page in full screen mode and lines of code is as follows.

//go to full screen mode on click of button
document.getElementById("button").addEventListener("click", function() {
    if (!document.fullscreenElement) {
     //to exit the full screen mode
}, false);

Browser Support*:


This is amazing right? As mobile technology is evolving day by day, these kind of API will help to develop  robust applications which not only reduces the cost but also increases the user interaction.



About The Author

Anusha KPNV

Senior Web Developer, TA Digital, Hyderabad.