navigator.permissions is a read-only property that returns a Permissions object — the entry point to the Permissions API. Use it to query (and, where available, update) permission status for covered features (MDN).
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.permissions. Start with this line.
navigator.permissions| Call | What it does |
|---|---|
navigator.permissions | Primary signature. |
Built into the browser. Read navigator.permissions on Navigator — no import required.
navigator.permissions| Parameter | Description |
|---|---|
| query({ name }) | Required. Ask for current status (async) |
| PermissionStatus.state | Required. granted / prompt / denied |
| change event | Optional. React when the user updates settings |
| Return Value | Description |
|---|---|
| * | The current value of navigator.permissions. |
Check whether the Permissions API exists before calling query().
if ("permissions" in navigator) {
console.log("permissions available");
} else {
console.log("permissions missing");
}in. Checks whether the property exists on navigator.query() and rely on feature-API error handling instead..query().Branch UI on granted vs prompt; leave denied alone.
async function checkGeoPermission() {
if (!navigator.permissions) {
console.log("Permissions API missing");
return;
}
const result = await navigator.permissions.query({ name: "geolocation" });
if (result.state === "granted") {
console.log("granted — showMap()");
} else if (result.state === "prompt") {
console.log("prompt — showButtonToEnableMap()");
} else {
console.log("denied — do not nag");
}
}
checkGeoPermission();geolocation permission descriptor.changePermissionStatus fires change when the user updates the decision.
async function watchGeoPermission() {
if (!navigator.permissions) {
console.log("Permissions API missing");
return;
}
const status = await navigator.permissions.query({ name: "geolocation" });
console.log("initial: " + status.state);
status.addEventListener("change", () => {
console.log("changed: " + status.state);
});
}
watchGeoPermission();PermissionStatus object.change event fires when state updates.navigator.permissions is Baseline Widely available (MDN: since September 2022). Individual permission names can still differ across browsers — feature-detect and catch query errors.
Query permission status for permission-aware UX. Pair with the real feature API (geolocation, media, and so on) when you need the capability itself.
Bottom line: Detect navigator.permissions, query safely, branch on granted/prompt/denied, and never nag after denial. Avoid deprecated revoke().
Continue with the next Navigator property in the JavaScript guide.
8 people found this page helpful