Web APIs You [Probably] Didn't Know Existed

Powerful JavaScript APIs you should know

You’ve probably heard about the amazing things that HTML5 can do. Maybe you already saved some data using Local Storage, fetched user coordinates using Geolocation, or even drew graphs and other objects using Canvas. But did you know there are many more new JavaScript APIs in the Web Platform? In this talk, we’ll see how to leverage the power of those APIs in order to create better experiences for your users.

Page visibility API

Provides an API to determine weather the current page is visible or not. There were some hacks in the past but they were just hacks.

window.addEventListener('visibilitychange', () => {
    if(document.hidden){
       console.log('tab is hidden');
     }
     else {
      console.log('tab is focused');
     }
});

The API has evolved through times and there are other statuses too like pre-render. The page visibility API is also supported everywhere.

Application of page visibility API

A video player on a screen, user starts the video but leaves without finishing. You can pause the video and playback when she comes back.

Online or Offline. Network Information API.

API exposes a network connection availability info on the web. Valuable information like is the user online or offline? And if you dig deeper you will also find functions to determine if the user is using 2G, 3G network or WiFi.

*Example: *

 console.log(navigator.onLine ? 'online' : 'Offline');
 // You can also listen to both events
 window.addEventListener('offline', networkstatus);
 window.addEventListener('online', networkstatus);
 function netwrokstatus(e) {
   console.log(e.type);
 }

The application of this API is very important, especially if you have users with bad internet connection. You can detect when they are interrupted and inform them. You can detect if they have bad connection and sacrifice some of your fancy images. These smaller things can immensely improve user experience.

Vibration API

Provides form of tactile feedback for mobile devices.

 // vibrate for 1 sec
 navigator.vibrate(1000);
 // Vibrate with a pattern of vibrate and wait
 navigator.vibrate([400, 300, 300, 200, 500]);
 //To turn off vibration
 navigator.vibrate(0);

This API is fairly supported in major browsers.

Application of vibration API includes

  • Form validation. When input is invalid
  • Games. Ex, when mission fails.

Device Orientation API

Provides access to device's physical orientation. You can actually detect the physical orientation of the user's device.

let logo = document.querySelector('img');
window.addEventListener('deviceorientation', (e) => {
    let tilteLR = e.gamma;
    let tilteFB = e.beta;
    logo.style.transform = 'rotate({tilteLR}deg)
                            rotate3d(1, 0, 0, ${tiltFB * -1}deg);
}

Application of device orientation API includes 360 photos and 360 videos.

Clipboard API

Interacting with clipboard which includes copying, cutting and pasting.

let button = document.querySelector('button');
button.addEventListener('click', () => {
    select();
    copy();    
});

function select() {
    let input = document.querySelector('input');
    input.focus();
    input.setSelectionRange(0, input.value.length);
}
function copy() {
    try {
        document.execCommand('copy');
    }
    catch (err) {
        console.log(err);
    }
}

Ambient Light

Exposes sensor data that captures the light intensity of the user's environment. To determine if the user's environment is light or dark.

Example:

window.addEventListener('devicelight', (e) => {
    console.log('${e.value} lux');
});

Also check out the cool ghost example at 18:29 This cool API is not supported by major browsers yet.

Application of ambient light includes

  • Adjusting light and contrast for better reading.

Battery Status API

Allow web pages to access battery information of the user's mobile or desktop devices.

navigator.getBattery().then((battery) => {
    console.log();
    battery.addEventListener(); 
});

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.