web apis

Learn JavaScript – 3 Cool Browser API’s You See Everyday (Which You Gotta Know)

Have you ever wondered how food delivery or call taxi sites/app gets your location from mobile? Browser notifies you that your facebook friend just liked your profile picture? Yep, these are all Browser API’s and they are becoming cooler and cooler by the minute and it’s kinda hard to catch up. There are lots of browser API’s here we are going to see about some of the most useful API’s along with examples.

3 Gotta Know Browser API’s

  1. Geolocation API
  2. Page Visibility API
  3. Web Notification API

1. Geolocation API

One of the coolest API is the Geolocation API

  • Users visiting your website/App location is the best way to track analytics.
  • Websites like shopping cart, delivery item, taxi can use this information to know the user physical location instead of asking them to provide address like the olden days.

How Geolocation API Works?

  • Using GPS and location information like IP address, Wireless connections, Cell tower information, Latitude and longitude are available in JavaScript.
  • Mobile phones usually works by first triangulating the user location with mobile network and use GPS to pinpoint the location for high accuracy

Steps to Get Latitude and Longitude

  • Privacy is a huge concern since we are actually trying to retrieve user location.
  • So, in order to obtain lat and long to use with JavaScript, the user has to first share his location

web apis

  • Once the user allows, you can easily fetch the lat and long from the below functions.

Once you fetched the coordinates successfully, its up to you decide how to use this information whether to show in maps or fetch address (Google maps can help with these)

Browser Compatability:

web apis location api

Reference:

2. Page Visibility API

Have you wondered how a website playing a video pauses when user switches to different tab? Well, Page Visibility API does the trick. We can even use this concept to great extend our application functionality when user is not active by saving resource.

How to use?

Page Visibility API provides 2 methods to use it,

  • document.hidden – provides a boolean whether the page is hidden or not
  • document.visibilityState – using visibilitychange event, triggers when state of the page window changes

Using this simple concept, you can turn off any unwanted process in your UI when user is not active in the website.

Browser Compatability:

web apis page visibility api

Reference:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
  2. Cool example: http://daniemon.com/tech/webapps/page-visibility/

Web Notification API

Notifications are important in letting users know any information from the application

  • Whether to tell them they are idle for a while
  • or think of a simple chat whether needs to informed whether user pings them even when they are idle or in some other tab.
  • Reminding user to perform certain tasks like ToDo application.

The Web Notification API lets these notification from web application or app to send information.

web apis notification api

 

 

How to use Web Notification API

  • Similarly like Location API, first users has to allow permission to allow. Else, these can become another SPAM dump.
  • Once granted, you can send notification message easily.
  • It’s even possible to set close notification, add handlers etc.

web apis notification api

Browser Compatability:web apis notification api

Reference:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

Well, thats it for now. Still there are tons of Web APIs like Web Workers, MediaDevices.getUserMedia, Battery API etc., checkout in https://developer.mozilla.org/en-US/docs/Web/Guide