Skip to content

Generic Sensor API

Published Updated

In one line: per MDN, the Sensor APIs are “a set of interfaces built to a common design that expose device sensors in a consistent way to the web platform,” with concrete interfaces including Accelerometer, Gyroscope, Magnetometer, and AmbientLightSensor; developers use these subclasses rather than the base Sensor interface directly.

There is no compatibility dataset for this feature on this site yet, so treat the following as the current per-sensor, per-browser position rather than a single blanket statement:

  • Per MDN’s browser-compat-data, Chrome has supported Accelerometer and Gyroscope since version 67, with no flag required.
  • Per the same browser-compat-data, Chrome has supported Magnetometer and AmbientLightSensor since version 56, but only behind the #enable-experimental-web-platform-features flag; Chrome for Android, Edge, Opera, and Samsung Internet for Android mirror this same flagged status for both of those two sensors.
  • Firefox and Safari implement none of these four interfaces, per MDN’s browser-compat-data.
const acl = new Accelerometer({ frequency: 60 });
acl.addEventListener('reading', () => {
console.log(`Acceleration along the X-axis ${acl.x}`);
});
acl.start();

Per MDN, using a sensor also requires the user to grant permission through the Permissions API (permission names vary by sensor, e.g. 'accelerometer', 'magnetometer', 'ambient-light-sensor'), and the feature “is available only in secure contexts (HTTPS).”

function startAccelerometer(onReading) {
if (!('Accelerometer' in window)) {
// Fallback: the interface isn't exposed in this browser.
return null;
}
try {
const sensor = new Accelerometer({ frequency: 60 });
sensor.addEventListener('error', (event) => {
console.error(`Sensor error: ${event.error.name}`);
});
sensor.addEventListener('reading', () => onReading(sensor));
sensor.start();
return sensor;
} catch (error) {
// Per MDN, the Accelerometer() constructor throws a SecurityError when a
// Permissions Policy set on the server blocks the feature.
console.error(`Could not start sensor: ${error.name}`);
return null;
}
}
  • Feature-detect the specific interface ('Accelerometer' in window, etc.) rather than assuming all four sensor interfaces are equally available — per MDN’s browser-compat-data, Chrome’s flag requirement differs between Accelerometer/Gyroscope (no flag) and Magnetometer/AmbientLightSensor (flag required) — don’t assume every Chromium sensor needs the same flag.
  • Handle the sensor’s error event — per MDN, once it fires the sensor “becomes idle and stops reading values” until restarted.
  • A SecurityError from the constructor means a Permissions Policy is blocking the feature, per MDN’s documented exception for Accelerometer().
  • Firefox and Safari implement none of Accelerometer, Gyroscope, Magnetometer, or AmbientLightSensor — design a fallback UI path for those browsers rather than a dead feature.
  • Geolocation API — another permission-gated device capability with its own secure-context requirement.
  • Idle Detection API — another Permissions API-gated capability limited to a subset of browsers.