Permissions API

By  on  

Many of the functionalities that we're translated from mobile to the web require permission from the user.  Think about geolocation, audio/video access (think getUserMedia for camera access), and likewise APIs.  We can probably all agree that requiring permission for access to these APIs is a good thing, but I see a problem:  there's sometimes no way to access each APIs permission level without triggering a request to the user to get that information.  Obtrusive to say the least!

I recently discovered the Permissions API which provides a method to query the permission level for an API without trigger a request to the user for access.  Let's look at a simple example:

// Get the geolocation status (starts out as "prompt")
// ... meaning the user will be shown an access request if we want it
navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
    /* result.status = "prompt" */
});

// Request geolocation access if we really want it
navigator.geolocation.getCurrentPosition(function(result) { /* ... */  })

// Assuming the user requested access, the permission is now "granted"
navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
    /* result.status = "granted" */
});

// Push notifications require options:
navigator.permissions.query({ name: 'push', userVisibleOnly:true }).then(function(result) { /* ... */ });

I love this new API -- a clear path for getting a permission level without needing to request any information from the user. For example: if the permission level is negative, don't ask the user permission to do something, or prompt the user in another fashion to allow a given permission.

Do you see another advantage to this API? Share!

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. Adam

    Like for some apps, we can show a nice information that we are going to ask you permission for ex. geolocation and explain why would we need this, if you tell me what are you going to do with this, then I am more about accepting…

  2. Vladimir Georgiev

    It seems in Chrome you need to look for result.state, and not result.status

  3. Thank you for sharing :)

    I’ve had some issues with one name though: microphone. If I query many of the other names possible, I get the correct status. But ‘microphone’ throws an error.

    Is there any way to make javascript show a list of all supported names in the current browser?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!