Permissions API for Web

Permissions API in Web - PranavOn.Net

Till now, when you land on a site that needs your location, Chrome immediately pops up a little request at the top of the browser window, even though you may not even really know what the site is all about. Now, as a developer, if you’ve worked with the Geolocation API before, chances are you’ve wanted to check if you had permission to use Geolocation without causing a prompt. This simply wasn’t possible. You had to request the current position and this would indicate the permission state or cause a prompt to be shown to the user. Similarly for Notifications, you need to check whether notifications are enabled or not. Each API has different (or its own) way of checking if that feature is available/enabled or not. With the increased and growing number of such APIs in there is a necessity for common way of doing this. Chrome is first one to implement this feature called ‘Permissions API’ in its 43 version which is rolled out a couple of days back.

To brief, Permissions API lets developers query and observe changes to their permission status for Geolocation, Push, Notifications, and Web MIDI. Asking for permission in context means fewer unnecessary and untimely prompts for the user.

Before the Permissions API, websites could not determine the permission state of APIs. Sites would thus attempt to use APIs immediately after page load without pre-existing permission, causing users to see confusing permission prompts without an explanation.

You can check the status of a permission using the permissions.query() method. This will return a status of granted (you have permission), denied (you are blocked from accessing the API) or prompt (user needs to be prompted).

// Checking for Geolocation API Permissions  
navigator.permissions.query({name:'geolocation'}).then(function(permissionStatus) 
{  
  console.log('geolocation permission status is ', permissionStatus.status);  
  permissionStatus.onchange = function() {  
    console.log('geolocation permission status has changed to ', this.status);  
  };
});

For more details on Usage, have a look at Documentation or for a quick glance.

Demo: Permissions API Demo

Resources:

Leave a Reply

Your email address will not be published. Required fields are marked *