HTML5 Vibrate APIS for Web and Mobile App Development
Today all modern web applications are utilizing HTML5 APIs to create interactive websites and powerful gaming apps on mobiles. Up until now, vibration feature have been used only in mobile native apps to send some notifications. We’re going beyond that with vibration for the mobile-web application that can provide you feedback with tactile vibrations. Let’s check out this API in a little detail.
HTML5 Vibrate API, one of the exciting APIs that helps to programmatically access the hardware component of a mobile devices allowing it’s vibration capabilities to work. Imagine you came across a product that you would love to buy it for lesser price. Imagine you could be trying to do some online banking. As a developer, you can create a tactile vinration and let the user know that their session is going to timeout in a minute, and offer the user a quick and easy way to keep their session going without having to log in again.
Use ful Scenarios:
- When a user tries to submit the form while the required field is left empty or the entered text does not match the requirement.
- For creating the Notifications, alerts in Video games etc.
- To engage mobile shoppers by prompting new offers
Usage:
This api is simply a method in the navigator object. Below is the simple code sample that uses vibrate() method which you can tell the device to vibrate for a given duration.
// Vibrate once for 1 second
navigator.vibrate(1000);
Vibration pattern can be customized by passing an array of numbers. In the below example the devices will vibrate for 1000 ms, wait 300 ms and vibrate again for 1000 ms.
// device will vibrate wait vibrate
navigator.vibrate([1000, 300, 1000]);
This alerts the device how long to vibrate pointing out how long the pauses between the vibrations should be. You can even halt the device from vibrating by just passing an integer value 0 or an empty array to the navigator.vibrate() method
Browser support:
Recent versions of Firefox and chrome browser supports this Vibration API property, but it supports other standard browsers by using moz and webkit prefixes respectively.
Vendor prefixes would be handy for compatibility:
// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// vibration API supported
}