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 🤔?
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.
Top comments (6)
Why use permision API over a JWT token? This isn't a bad reply or something, just honest curiosity.
Permission API and JWT both have different use cases.
JWT is primarily used for authentication and data exchange which involves complex algorithms, whereas permissions API only runs in browser and is quite easy to use.
I hope this clears your doubt.
Thanks for the response
Silly me, I missunderstood the concept. My bad, forget about it.
That's ok
Hi sir..im actually understand what the API is, but to get using the permission API via clipboard and other you list above, i think i should learn javascript from the beginning..im trying actually on freecodecamp.org but stuck at uncomment task..trying to figure it out many times, also trying to get tutorial on the web, but also not helping me..sigh..where should i start actually?
Yeah that is right, you have to learn basics of javascript to understand these APIs. To do I recommend you take a video course whether on udemy or youtube.
Hope it helps