Permissions API & Why should you start using it?

Hey guys 👋

In this article I will explain the usage, importance and use cases of Permissions API and why is it so important for user experience.

Let's get started 🚀

Table of content

• Introduction
• Where can we use Permissions API
• Accessing the API
• Checking Clipboard permissions
• Checking geolocation permissions

Introduction 🟢

The Permissions API can be used to determine if permission to access a particular API has been granted ✅ or denied ❌.

The Permissions API provides the tools to allow us developers to implement a better user experience as far as permissions are concerned.

Which is vital to increase the accessibility and usability of the application.

Permissions API does not work in Safari and IE.

Where can we use permissions API 🤔?

• Clipbaord API
• Geolocation API
• Notification API
• Push API

To learn more about Clipboard API read my article here.

Accessing the permissions API?

permissions object is available on Navigator.permissions property 👇

const permissions = navigator.permissions;

For checking the status of permission of a certain API .query() method is used which is available on permissions object.

.query() accepts a parameter say permissionDescriptor which is an object defining on which API query should fire on.

.query() will return a promise which will resolve to PermissionStatus object which will tell us about the status of the certain permission.

Enogh talk 😅, let's see it in action 👇

-

1️⃣ Using Permissions API for checking Clipboard permissions:

const permissions = navigator.permissions;

permissions.query({name: 'clipboard-write'}).then(cbWritePermission => {
console.log(cbWritePermission.state) // "granted"

// clipboard-write permission is granted by the browser automatically
});

In the above example the state property will tell us about the status of the permission. It can have following values:

granted: Permission is granted.

denied: Permission is denied.

prompt: Permission is not yet asked.

Let's see an example of clipboard-read permission 👇

// suppose a scnerio where you want to do 
// something with the text before it get pasted by the user 
// in your application. 
// or you want to auto-capture copied text
// checking the item before doing anything
// with it is also good for security.

// reading text on a click
button.addEventListener("click", async () => {
  const cbReadPermissionStatus = await permissions.query({
    name: "clipboard-read",
  });
  if (
    cbReadPermissionStatus.state === "granted" ||
    cbReadPermissionStatus.state === "prompt"
  ) {
    const text = await navigator.clipboard.readText();
    // do something with the text
  } else {
    // show a nice error message, or ask for the permission nicely
  }
});

2️⃣ Checking geolocation permissions using Permissions API:

• building an application where the current location of the user is important for a feature to work in your application? Then this one is for you.

See the example below 👇

button.addEventListener("click", async () => {
  const geoPermissionStatus = await permissions.query({ name: "geolocation" });

  if (
    geoPermissionStatus.state === "granted" ||
    geoPermissionStatus.state === "prompt"
  ) {
    navigator.geolocation.getCurrentPosition((pos) => {
      console.log(pos);
      // do something with the location
      // show friends around the user for eg
      // or move the map to the user's location
    });
  } else {
    // show warning that certain feature of the app
    // will not work if the location permission is not provided
  }
});

Others APIs permissions can be checked using the same procedure as defined above.

Thank you for giving it a read. ❤️

Please follow me on twitter

Happy Coding