Permissions API

TL;DR

Explanation

navigator.permissions.query({ name: 'geolocation' | 'camera' | 'clipboard-read' | 'notifications' | ... }) returns a PermissionStatus with state: 'granted', 'denied', or 'prompt'. Subscribe to changes with status.onchange. Use cases: show appropriate UI (enable location button vs 'go to settings' message), avoid triggering permission prompts at bad times. Supported permissions vary by browser. Not all APIs have a corresponding permission entry — check MDN for coverage. Chrome, Firefox, and Safari have different support levels.

Common Misconception

Why It Matters

Common Mistakes

• Not checking permission before showing a feature that requires it.
• Assuming query() is available for all permissions — coverage varies by browser.
• Not reacting to permission state changes (onchange event).

Code Examples

// Immediately request — no context for user:
navigator.geolocation.getCurrentPosition(success, error);

const status = await navigator.permissions.query({ name: 'geolocation' });

if (status.state === 'granted') {
    navigator.geolocation.getCurrentPosition(success);
} else if (status.state === 'prompt') {
    showLocationRequestButton(); // User hasn't decided
} else {
    showEnableInSettingsMessage(); // Denied
}

status.onchange = () => updateUI(status.state);

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API

Tags

Related Terms