Enhance your web apps with a vibration!!
Tags: webdev, javascript, api, frontend
Published: 2020-12-16 14:06:55

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**<br>
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 [
![Twitter-Logo-2010–2012.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607094167287/6eROzoiWz.png)](https://twitter.com/paco_ITA)

------------------

## 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.

![Screenshot 2020-12-04 at 15.08.04.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607090902022/NV-qg2mbE.png)

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](https://pacoita.github.io/vibration_api_demo/home).

Here the [Github REPO](https://github.com/pacoita/vibration_api_demo)  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.