HTML5 has been a great evolution for the web, it incorporates all types of elements that we can use for multiple purposes and that we can extend through different libraries; Being able to create interactive websites has been greatly simplified and in this way we can improve the user experience on PC and mobile devices.
An example of a very little used and less exploited utility is the vibration AP in HTML, this is a very useful API for mobile applications today, receiving emails, text messages, calls, all of this goes through a vibration of the device which is the first thing we notice if we carry the smartphone with us and is one of the few APIs that do not use our eyes or our fingers; It is enough that we have the mobile phone nearby and it vibrates and in this way the application gives us information about it (generally it is a notification notice) without needing to view the mobile phone and we can transmit all this to the user.
Devices such as tablets and phones have an important presence on the web today; The data traffic generated by these devices is estimated to surpass the data traffic generated by PCs within a few years; For this reason, it is important for us developers to exploit in the best possible way all the tools that the Web offers us; Among them is the HTML5 Vibration API. In this article we will see how to add this feature of making devices vibrate to our applications.
The vibrate method of the navigator object allows you to enable hardware vibration of a device using JavaScript; Of course, this will occur if such hardware is present in said device; If the device does not support vibration, the method will have no effect on the device.
What is it?, The Vibration API in detail
As we indicated before, the Vibration API is designed so that instead of receiving a tactile or sound response, this response is physical, since the device has the ability to vibrate on a modern device with Android, iOS or a similar device.
How to use it? - Syntax
The vibration API is accessed through the global navigator object as follows:
navigator.vibrate(patrón);Vibrate only once
Where pattern can be:
- An unsigned integer: Representing the duration given in milliseconds of one and only one vibration; therefore it is the simplest way to establish vibrations; let's see an example: // vibrates for one second navigator.vibrate(1000);
The above code will vibrate the device for 1000 milliseconds, or in other words, for one second.
Vibrate/stop vibrating several times
- A sequence of signed integers: or rather, an array with multiple values that alternately represent the vibration and pause intervals in milliseconds for each of the values contained within the array. // vibrates for one second, stops vibrating for half a second and then vibrates for two more seconds navigator.vibrate([1000, 500, 2000]);
The above code will vibrate the device for one second, then there will be a wait of half a second, ending with a two-second vibration.
Stop device vibration
The Vibration API will not block your JavaScript code; and therefore will continue to run while the device is vibrating. If for any reason you want to end the vibration, you can set the pattern to zero:
// stop device vibration navigator.vibrate(0);
It is also possible to cancel the device vibration with:
// also stops device vibration navigator.vibrate([]); // this one too... navigator.vibrate([0]);
Detecting Vibration API support in browsers
It is always advisable to carry out the necessary validations before working with any of the APIs in HTML5; To detect the presence of the Vibration API, you only have to perform the following check:
var vibrationsupport= "vibrate" in navigator;
Image 1: Vibration API support in the Google Chrome browser for PC.
As we can see in the previous image; This verification will return a boolean:
- true: The browser offers support for the Vibration API.
- false: The browser does not offer support for the Vibration API.
Why use the Vibration API?
This API is clearly designed for mobile devices; It is helpful to alert the user about any changes in the Web application; Even at the time of development, at the time of an explosion or a shooting, make the device vibrate.
Conclusions
This API is very easy to use and very powerful; since it allows access to the device's hardware; However, you must be very careful when using this API; It is worth remembering that it only works with mobile devices (obviously the PC will not vibrate), in addition to this, we should NOT leave the client's device vibrating forever no matter how provocative and fun the idea may be.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter