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

Proximity Sensors

The Proximity Events API allows Web applications to get the access to the data from the device's proximity sensors, detecting whether there is a physical object near the device.

The first approach to supporting proximity sensor on the Web - as a standalone API - was implemented in Firefox. Since then the specification was rewritten to make use of the new Generic Sensors API, but no vendor implemented that spec as of early 2020.

API glimpse

The old, standalone API

window.addEventListener('deviceproximity', listener)
An event fired when the device has sensed the physical object proximity, containing approximate distance information.
window.addEventListener('userproximity', listener)
An event fired when the device has roughly sensed the physical object proximity, containing boolean near flag only.

The new, generic API

sensor = new ProximitySensor()
Creates an object serving as an accessor to the proximity sensor readings.
sensor.addEventListener('reading', listener)
An event fired when the physical object proximity reading has changed, indicating that the sensor object contains updated approximate distance information in cm (sensor.distance) and boolean sensor.near flag.
sensor.start()
Starts listening for the sensor readings.

Live Demo

Current approximate distance to object is unknown.

Currently, the object is in unknown proximity.

  • var box = document.getElementById('box');

function onDeviceProximityChanged(event) {
  document.getElementById('deviceValue').innerHTML = event.value + ' cm (' + event.min + '-' + event.max + ' cm range)';
  
  var size = Math.min(200, Math.max(20, 500 / (event.value || 1)));
  
  box.style.width = size + 'px';
  box.style.height = size + 'px';
}

function onUserProximityChanged(event) {
  document.getElementById('nearValue').innerHTML = event.near ? 'near' : 'rather far';
  box.style.backgroundColor = event.near ? 'red' : 'green';
}

window.addEventListener('deviceproximity', onDeviceProximityChanged);
window.addEventListener('userproximity', onUserProximityChanged);
  • <p>Current approximate distance to object is <b id="deviceValue">unknown</b>.</p>
<p>Currently, the object is <b id="nearValue">in unknown proximity</b>.</p>

<div id="box"></div>

Resources

Get in touch