{
    "slug": "js_permissions_api",
    "term": "Permissions API",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "The Permissions API (navigator.permissions.query()) lets you check the current state of browser permissions — granted, denied, or prompt — before requesting sensitive APIs.",
    "long": "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.",
    "aliases": [],
    "tags": [
        "javascript",
        "browser-api",
        "permissions",
        "ux"
    ],
    "misconception": "Checking permissions with the Permissions API is the same as requesting them — query() checks without requesting. The actual request happens when you call the API (e.g., geolocation.getCurrentPosition).",
    "why_it_matters": "Querying permissions before prompting allows showing context-aware UI — not prompting when denied (show 'enable in settings' instead), or prompting at the right moment.",
    "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)."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_geolocation",
        "js_clipboard_api",
        "js_share_api"
    ],
    "prerequisites": [
        "js_async_await"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API"
    ],
    "bad_code": "// Immediately request — no context for user:\nnavigator.geolocation.getCurrentPosition(success, error);",
    "good_code": "const status = await navigator.permissions.query({ name: 'geolocation' });\n\nif (status.state === 'granted') {\n    navigator.geolocation.getCurrentPosition(success);\n} else if (status.state === 'prompt') {\n    showLocationRequestButton(); // User hasn't decided\n} else {\n    showEnableInSettingsMessage(); // Denied\n}\n\nstatus.onchange = () => updateUI(status.state);",
    "quick_fix": "Query permission state before requesting sensitive APIs. Show appropriate UI for each state (granted/prompt/denied). Listen to onchange for state updates.",
    "severity": "low",
    "effort": "low",
    "created": "2026-03-23",
    "updated": "2026-04-05",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_permissions_api",
        "html_url": "https://codeclaritylab.com/glossary/js_permissions_api",
        "json_url": "https://codeclaritylab.com/glossary/js_permissions_api.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Permissions API](https://codeclaritylab.com/glossary/js_permissions_api) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_permissions_api"
            }
        }
    }
}