Access smartphone sensor data on a website with the Permissions API (iOS 13)

I wrote this article about reading sensor data from on a Smartphone with JavaScript a while ago. Those methods worked for Android phones as well as iPhones running on iOS 12 (or lower). However, with iOS 13, Apple changed the way sensor requests have to be made, and I decided to post an update to accomodate for that.

You, as the developer, aren’t allowed to simply read sensor values with JavaScript any more, and that’s a good thing because it means better privacy protection and security for the users. However, for developers it can be a struggle.

Determine whether the website is displayed on an iOS 13 device

First, you’ll have to detect whether the device can use the Permissions API. Note, that it’s not exclusive to iOS 13 devices. However, for the sake of simplicity I’ll simply distinguish between iOS 13 devices (the ones that support the Permissions API), and all other devices. The following snippet can be used to detect, whether a device supports calls to the new API and it can also be used to provide a fallback:

if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function')
{
    // iOS 13 device (supports the Permissions API)
}
else
{
    // other devices
}

As you can see, a simple check is sufficient. If the browser knows the requestPermission function, it also supports the Permissions API.

Requesting a permission

Once you determined, whether the Permissions API is supported, you’ll have to ask the user for a permission to access the phone sensors. To do that, you can use the requestPermission in function as shown in the following example:

DeviceMotionEvent.requestPermission().then(response => {
    if (response === 'granted')
    {
        // Permission granted
    }
    else
    {
        // Permission denied
    }
}).catch(console.error);

Important Notes

You must remember the following three things when you want to use the Permissions API:

  1. HTTPS is required
    If you serve the website with unencrypted HTTP, the permission dialogue won’t pop and it’ll automatically be denied by iOS.

  2. Permissions get saved
    The system stores the permissions (both granted and denied) together with the certificate of the website. So if you accidentally granted or denied a permission you’ll have to delete the data for that website from your phone.

  3. The permission request must be triggered by the user
    You can not just ask for permissions. The user has to do something that triggers the request (for example click a button, tick a checkbox, etc.).

It’s important you keep those things in mind. They can save you a lot of time when something doesn’t work as planned.

Reading the sensor data

Now, once you got the permission to read the sensor data, it’s actually quite easy to accuire the information. You just have to add the event listener (like you’d if you weren’t using the Permissions API. See the old article for more details).

function handleRotation(event)
{
    console.log(Math.round(event.gamma));
    console.log(Math.round(event.beta));
}

function requestPermission()
{
    if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function')
    {
        DeviceMotionEvent.requestPermission().then(response => {
            if (response === 'granted')
            {
                // Permission granted
                window.addEventListener('deviceorientation', handleRotation);
            }
            else
            {
                // Permission denied
            }
        }).catch(console.error);
    }
    else
    {
        // other devices
        window.addEventListener('deviceorientation', handleRotation);
    }
}

Note, that I omitted the HTML to keep the article short. In the HTML file, make sure that the requestPermission method gets called when the user triggers an action (for example presses a button), and that the server supports HTTPS.

Summary

And that’s how you can request permission to use a smartphone’s sensor data on your website. Make sure you keep the three important notes in mind. Otherwise, you won’t be able to request a permission at all at it’s just going to be a pain to debug the code.

One thought on “Access smartphone sensor data on a website with the Permissions API (iOS 13)

Leave your two cents, comment here!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.