Permissions API

Requesting permissions, checking status, and handling denial.

Overview

The Permissions API provides a way to check and request browser permissions.

Key Concepts

• query() — Check permission status
• request() — Request permission
• Permission States — granted, denied, prompt
• Persistent Permissions — User preferences
• Feature Detection — Check API support

Code Examples

<div id="status"></div>
<button id="requestCamera">Request Camera</button>
<button id="requestNotification">Request Notification</button>

<script>
const statusDiv = document.getElementById('status');

function updateStatus(permission, state) {
  const div = document.createElement('div');
  div.textContent = `${permission}: ${state}`;
  div.className = `status-${state}`;
  statusDiv.appendChild(div);
}

// Check permission status
async function checkPermissions() {
  const permissions = ['camera', 'microphone', 'geolocation', 'notifications'];
  
  for (const permission of permissions) {
    try {
      const result = await navigator.permissions.query({ name: permission });
      updateStatus(permission, result.state);
      
      result.addEventListener('change', () => {
        updateStatus(permission, result.state);
      });
    } catch (error) {
      updateStatus(permission, 'not supported');
    }
  }
}

// Request camera permission
document.getElementById('requestCamera').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    updateStatus('camera', 'granted');
    stream.getTracks().forEach(track => track.stop());
  } catch (error) {
    updateStatus('camera', 'denied');
  }
});

// Request notification permission
document.getElementById('requestNotification').addEventListener('click', async () => {
  const result = await Notification.requestPermission();
  updateStatus('notification', result);
});

// Check if permission API is supported
if ('permissions' in navigator) {
  checkPermissions();
} else {
  statusDiv.textContent = 'Permissions API not supported';
}
</script>

<style>
.status-granted {
  color: #28a745;
  font-weight: bold;
}

.status-denied {
  color: #dc3545;
  font-weight: bold;
}

.status-prompt {
  color: #ffc107;
  font-weight: bold;
}

.status-not {
  color: #6c757d;
  font-style: italic;
}
</style>

Practice

Build a permission request flow for camera and microphone access.