Permissions

The Permissions API provides the uniform way for Web applications to query for the permission status for the features that require user consent, like notifications or geolocation. With Permissions API the app can list the permissions granted by the user without actually trying to use the feature.

API glimpse

navigator.permissions.query({name: feature})
Returns a Promise resolved with the object representing the permission status of the requested feature.
permissionStatus.state
Returns the permission status of the requested feature, either granted, denied or - in case the user was not yet asked - prompt.
permissionStatus.addEventListener('change', listener)
An event fired when the permission status of the requested feature has changed.

Live Demo

Geolocation permission status is unknown.

Notifications permission status is unknown.

Push permission status is unknown.

Midi permission status is unknown.

  • if ('permissions' in navigator) {
      var logTarget = document.getElementById('logTarget');
    
      function handleChange(permissionName, newState) {
        var timeBadge = new Date().toTimeString().split(' ')[0];
        var newStateInfo = document.createElement('p');
        newStateInfo.innerHTML = '<span class="badge">' + timeBadge + '</span> State of <b>' + permissionName + '</b> permission status changed to <b>' + newState + '</b>.';
        logTarget.appendChild(newStateInfo);
      }
    
      function checkPermission(permissionName, descriptor) {
        navigator.permissions.query(descriptor || {
            name: permissionName
          })
          .then(function (permission) {
            document.getElementById(permissionName + 'Status').innerHTML = permission.state;
            permission.addEventListener('change', function (e) {
              document.getElementById(permissionName + 'Status').innerHTML = permission.state;
              handleChange(permissionName, permission.state);
            });
          });
      }
    
      checkPermission('geolocation');
      checkPermission('notifications');
      checkPermission('push', {
        name: 'push',
        userVisibleOnly: true
      });
      checkPermission('midi');
    
      function requestGeolocation() {
        navigator.geolocation.getCurrentPosition(function () {});
      }
    
      function requestNotifications() {
        Notification.requestPermission();
      }
    
      function requestPush() {
        navigator.serviceWorker.register('')
          .then(function (serviceWorkerRegistration) {
            serviceWorkerRegistration.pushManager.subscribe();
          });
      }
    
      function requestMidi() {
        navigator.requestMIDIAccess();
      }
    }
  • <p>
      <b>Geolocation</b> permission status is <b id="geolocationStatus">unknown</b>.
      
      <button class="btn btn-default" onclick="requestGeolocation()">Request</button>
    </p>
    <p>
      <b>Notifications</b> permission status is <b id="notificationsStatus">unknown</b>.
      
      <button class="btn btn-default" onclick="requestNotifications()">Request</button>
    </p>
    <p>
      <b>Push</b> permission status is <b id="pushStatus">unknown</b>.
      
      <button class="btn btn-default" onclick="requestPush()">Request</button>
    </p>
    <p>
      <b>Midi</b> permission status is <b id="midiStatus">unknown</b>.
      
      <button class="btn btn-default" onclick="requestMidi()">Request</button>
    </p>
    
    <p id="logTarget"></p>

Resources