What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Permissions

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

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.

Camera permission status is unknown.

Microphone permission status is unknown.

Background Sync permission status is unknown.

Ambient Light Sensor permission status is unknown.

Accelerometer permission status is unknown.

Gyroscope permission status is unknown.

Magnetometer 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) {
        try {
        navigator.permissions.query(Object.assign({name: permissionName}, descriptor))
          .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);
            });
          });
        } catch (e) {
        }
      }
    
      checkPermission('geolocation');
      checkPermission('notifications');
      checkPermission('push', {userVisibleOnly: true});
      checkPermission('midi', {sysex: true});
      checkPermission('camera');
      checkPermission('microphone');
      checkPermission('background-sync');
      checkPermission('ambient-light-sensor');
      checkPermission('accelerometer');
      checkPermission('gyroscope');
      checkPermission('magnetometer');
    
      var noop = function () {};
      navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
      
      function requestGeolocation() {
        navigator.geolocation.getCurrentPosition(noop);
      }
    
      function requestNotifications() {
        Notification.requestPermission();
      }
    
      function requestPush() {
        navigator.serviceWorker.getRegistration()
          .then(function (serviceWorkerRegistration) {
            serviceWorkerRegistration.pushManager.subscribe();
          });
      }
    
      function requestMidi() {
        navigator.requestMIDIAccess({sysex: true});
      }
      
      function requestCamera() {
        navigator.getUserMedia({video: true}, noop, noop)
      }
      
      function requestMicrophone() {
        navigator.getUserMedia({audio: true}, noop, noop)
      }
    }
  • <div>
      <p>
        <b><a href="/geolocation.html">Geolocation</a></b> permission status is <b id="geolocation-status">unknown</b>.
        
        <button onclick="requestGeolocation()">Request</button>
      </p>
      <p>
        <b><a href="/local-notifications.html">Notifications</a></b> permission status is <b id="notifications-status">unknown</b>.
        
        <button onclick="requestNotifications()">Request</button>
      </p>
      <p>
        <b><a href="/push-notifications.html">Push</a></b> permission status is <b id="push-status">unknown</b>.
        
        <button onclick="requestPush()">Request</button>
      </p>
      <p>
        <b>Midi</b> permission status is <b id="midi-status">unknown</b>.
        
        <button onclick="requestMidi()">Request</button>
      </p>
      <p>
        <b><a href="/camera-microphone.html">Camera</a></b> permission status is <b id="camera-status">unknown</b>.
        
        <button onclick="requestCamera()">Request</button>
      </p>
      <p>
        <b><a href="/camera-microphone.html">Microphone</a></b> permission status is <b id="microphone-status">unknown</b>.
        
        <button onclick="requestMicrophone()">Request</button>
      </p>
      <p>
        <b><a href="/background-sync.html">Background Sync</a></b> permission status is <b id="background-sync-status">unknown</b>.
      </p>
      <p>
        <b><a href="/ambient-light.html">Ambient Light Sensor</a></b> permission status is <b id="ambient-light-sensor-status">unknown</b>.
      </p>
      <p>
        <b><a href="/device-motion.html">Accelerometer</a></b> permission status is <b id="accelerometer-status">unknown</b>.
      </p>
      <p>
        <b><a href="/device-motion.html">Gyroscope</a></b> permission status is <b id="gyroscope-status">unknown</b>.
      </p>
      <p>
        <b><a href="/device-motion.html">Magnetometer</a></b> permission status is <b id="magnetometer-status">unknown</b>.
      </p>
    </div>
    
    <p id="logTarget"></p>

Resources

Get in touch