Accessing the iPhone Accelerometer with Javascript in iOS 13-16+

TL;DR: Demo here. Hit the button at the top to start.

I recently tried out a bunch of different Javascript accelerometer demos that claimed to access the IMU sensor in-browser. It was usually a simple demo: dots rolling across a screen due to gravity, or perspective shifting a 3D scene based on your orientation. However, none of these demos worked at all — no popup asking about permissions or anything. What gives?

In iOS 13, Apple added an option under Safari to allow webpages to request accelerometer access. However, the webpage couldn’t just spam you with a “Please Let Us Use Your Accelerometer” screen until you responded yes — Instead, the user had to purposefully trigger the request, by hitting a button or performing an action to allow the site to request access. Whew!

This is a tutorial on how to do that. I’ll walk you through

• How to set up a webpage
• How to request permission to access the accelerometer through DeviceMotionEvent
• Visualizing the sensor values

Let’s start!

Setting up the webpage

To start, you’ll need to create an HTML page. We’re going to be making the background light blue, because white is boring.