Phone Calls and Text Messages
The most important features of our mobile devices are obviously making phone calls and sending text messages. It is actually possible with pure HTML to start a call and compose a text message by simply adding a special href value where normally regular URLs go. Pure HTML magic!
The geolocation API gives you information about the location of the user. There are multiple ways for the browser to get this data and some are more accurate than others (GPS vs. GSM or Wi-Fi). The
navigator.geolocation object is what we use to retrieve the global latitude and longitude position.
Browser support of the Geolocation API is greate. Even IE9 handles it.
Device Orientation and Device Motion API
The Device Orientation API accesses the built in gyroscope and compass of your device and can tell you the rotation angle of it in three dimension.
Device Motion API on the other hand uses the accelerometer to tell when the device moves or rotates into any direction. Keep in mind that it only detects acceleration and not the speed.
Browser support on both of these APIs are very good. There are no problems in iOS and Android at all and even IE for Windows Phone started supporting it from version 11.
The built in vibration motor of your device can be used to give subtle notifications to the user. It also offers a great way to give haptic feedback when a button or other element is tapped on the website. Although browser support is not as good as of the previous APIs but it can very easily be introduced as a progressive enhancement. This simply means that it will work on modern browsers but won’t break anything on the ones not supporting it. Android, Chrome, Firefox and Opera all support this.
Battery Manager API
There are many ways to use the battery status information on a web app. We can prevent complex, cpu heavy animations and calculations from running or large assets from downloading when the battery is low on power. This API worked both on my laptop and my Android phone in Chrome and it should also work in Firefox and Opera too.
Device Light API
This API uses the built in light level sensor of your device and returns the readings in lux units. Unfortunately, accessing this sensor is only supported in Firefox but it’s worth mentioning in case you are setting up a kiosk or tech demo where browser support doesn’t matter.
In the future, when CSS4 support increases, we might also start using the CSS4 light-level media query to change CSS styling when light conditions change. Very exciting!
Proximity Events API
The proximity sensor can usually be found on the front of your device and it uses its measurements to tell when you put your phone against your ear or when you reach towards it. It’s an accurate little sensor so it can tell the distance of any object held in front of the phone.
Similarly to the Device Light API this one is only support in Firefox.