Nowadays we are used to receive a tactile feedback when we receive a text message or when we play a game on our phone.
Until now, native apps had the advantage of providing a deep experience to the users, being able to tightly interact with the hosting hardware.
However, thanks to the Vibration API we can enrich our web apps with a new functionality and let a device vibrate through our browser!
It's a further step to close the feature gap with native applications.
The Vibration API simply won't do anything if the hosting device doesn't support it.
This goes along with the progressive enhancement strategy. That is, if the user has a modern browser and a device capable of vibrating, then we can offer a richer experience. On the other side, our web app must keep working correctly for all other users even without advanced features.
API Syntax
We use the navigator.vibrate to define a pattern, made of a single vibration or a sequence of vibrations and pauses. The method accepts as parameter an integer or an array of integers, expressing the length in milliseconds of a vibration or sequences of vibrations and pauses, respectively. The return value type is boolean: false in case we pass wrong parameters, true otherwise.
As mentioned previously, if the device doesn't support vibration, this method won't have any effect.
var success = window.navigator.vibrate(pattern);
pattern
Provides a pattern of vibration and pause intervals. Each value indicates a number of milliseconds to vibrate or pause, in alternation. You may provide either a single value (to vibrate once for that many milliseconds) or an array of values to alternately vibrate, pause, then vibrate again. (Source: MDN Web)
The method returns a boolean if we pass wrong parameters.
To generate a single vibration lasting 300ms we can use the following code:
window.navigator.vibrate(300);
While to create a pattern composed by 300ms vibration, 100ms pause, 300ms vibration:
window.navigator.vibrate([300, 100, 300]);
Cancel a running vibration
It is possible to interrupt a running vibration any time by passing a value of 0 or an empty array to the navigator.vibrate() method.
Similarly, if we pass a new valid pattern as parameter, while a vibration is going on, this will replace the old, running pattern.
Follow me on Twitter if you want to know about new articles or future updates
Use cases
We can think of different scenarios where this API might come handy. Probably the most intuitive one is for web games, where we can provide a further grade of engagement to the users.
It can be useful also for web quizzes to underline a wrong answer or to give a tactile feedback for errors while filling a form. The latter case can be particularly useful with long forms on mobile devices, since the displayed keyboard could cover some error messages or invalid form fields.
Browser support
The API is well supported by most (modern) browsers, with the exception of IE and Safari.
Of course, the target device must also have a vibration hardware in order to work correctly!
Demo
You can test the API on your phone with the following DEMO.
Here the Github REPO with the source code.
Conclusion
The Vibration API is another interesting possibility to enrich our web projects and offer an improved experience to our users that, until now, was reserved only to native applications.
Top comments (2)
FYI: The demo seems not to be working with Firefox 84.1.1 on Android 10.0.0.182 (Huawei P20Pro).
It works with Chrome on the very same phone.
Thanks for the hint. For the API support you can refer to caniuse.com/?search=Vibration
However it might be that the list is not always up to date with the very latest releases. That website states that it should work on Firefox v83 on Android (released on Nov 2020). In any case it is always good to design a fallback for unsupported browsers.