Permissions API

HTML5 Permissions API Overview

The HTML5 Permissions API provides a standardized way to check the current permission status for browser features such as Geolocation, Camera, Microphone, Notifications, Clipboard, MIDI, and other powerful web APIs. Instead of requesting permission immediately, applications can first check whether permission has already been granted, denied, or requires user interaction.

The Permissions API improves user experience by preventing unnecessary permission prompts and allowing applications to adapt their interface based on permission availability.

Basic Permissions API Example

// HTML5 Permissions API

async function checkPermission() {
  if (!("permissions" in navigator)) {
    console.log("Permissions API not supported.");
    return;
  }

  const permission =
    await navigator.permissions.query(
      {
        name: "geolocation"
      }
    );

  console.log(permission.state);
}

checkPermission();

The Permissions API checks the current permission status without displaying a permission dialog.

Permissions API Workflow

Permission States

Check Geolocation Permission

async function checkLocation() {
  const permission =
    await navigator.permissions.query(
      {
        name: "geolocation"
      }
    );

  switch (permission.state) {
    case "granted":
      console.log("Location available.");
      break;

    case "prompt":
      console.log("Ask user for location.");
      break;

    case "denied":
      console.log("Location blocked.");
      break;
  }
}

checkLocation();

The Permissions API lets your application know whether location services are already available before calling the Geolocation API.

Check Notification Permission

async function checkNotifications() {
  const permission =
    await navigator.permissions.query(
      {
        name: "notifications"
      }
    );

  console.log(
    permission.state
  );
}

checkNotifications();

Before requesting notifications, applications can verify whether the user has already accepted or denied notification access.

Check Clipboard Permission

async function checkClipboard() {
  const permission =
    await navigator.permissions.query(
      {
        name: "clipboard-read"
      }
    );

  console.log(
    permission.state
  );
}

checkClipboard();

Clipboard permission can be checked before attempting to read clipboard contents.

Check Camera Permission

async function checkCamera() {
  const permission =
    await navigator.permissions.query(
      {
        name: "camera"
      }
    );

  console.log(
    permission.state
  );
}

checkCamera();

Camera permission checking is useful before launching video recording or barcode scanning features.

Check Microphone Permission

async function checkMicrophone() {
  const permission =
    await navigator.permissions.query(
      {
        name: "microphone"
      }
    );

  console.log(
    permission.state
  );
}

checkMicrophone();

Voice recording and speech recognition applications often check microphone permission before starting audio capture.

Listen for Permission Changes

async function monitorPermission() {
  const permission =
    await navigator.permissions.query(
      {
        name: "geolocation"
      }
    );

  permission.onchange = () => {
    console.log(
      "Permission changed:",
      permission.state
    );
  };
}

monitorPermission();

Applications can react immediately when users change permissions through browser settings.

Feature Detection

function supportsPermissionsApi() {
  return "permissions" in navigator;
}

if (supportsPermissionsApi()) {
  console.log("Permissions API supported.");
} else {
  console.log("Permissions API not supported.");
}

Always check browser support because not every permission type is available in every browser.

Common Permission Types

Permissions API vs Permission Request

Practical Example

async function enableLocation() {
  const permission =
    await navigator.permissions.query(
      {
        name: "geolocation"
      }
    );

  if (permission.state === "granted") {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log(position.coords);
      }
    );
    return;
  }

  if (permission.state === "prompt") {
    navigator.geolocation.getCurrentPosition(
      () => {
        console.log("Permission granted.");
      }
    );
    return;
  }

  alert(
    "Location permission has been denied."
  );
}

This pattern checks permission first and requests location only when necessary.

Common Permissions API Use Cases

• Checking location permission before loading maps.
• Verifying notification access before subscribing users.
• Checking camera permission before video calls.
• Checking microphone access before voice recording.
• Clipboard permission for copy and paste tools.
• Offline storage permission.
• Device access management.
• Building permission-aware Progressive Web Apps.

Permissions API Best Practices

• Check permission before requesting browser access.
• Request permission only after a clear user action.
• Explain why the application needs permission.
• Respect denied permissions.
• Provide alternative functionality whenever possible.
• Monitor permission changes for long-running applications.
• Always use HTTPS.
• Test across multiple browsers because support varies.

Security and Privacy Considerations

• Only request permissions that are necessary.
• Never repeatedly prompt users after denial.
• Clearly explain how collected information is used.
• Do not access device capabilities without user intent.
• Protect personal data collected from granted permissions.
• Follow browser permission policies.
• Use secure HTTPS connections.
• Respect user privacy preferences.

Common Permissions API Mistakes

• Assuming all browsers support every permission type.
• Requesting permission immediately after page load.
• Ignoring denied permission states.
• Not providing fallback behavior.
• Using permissions without feature detection.
• Repeatedly requesting blocked permissions.
• Not explaining why permission is required.
• Forgetting HTTPS requirements.

Key Takeaways

• The Permissions API checks browser permission status.
• Use navigator.permissions.query() to read permissions.
• Permission states are granted, prompt, and denied.
• It works together with Geolocation, Notification, Camera, Clipboard, and other APIs.
• Always request permissions after user interaction.
• Provide graceful fallbacks for unsupported browsers.