Using the browser vibration API

Progressive Web Apps (PWAs) have been on everyone's lips lately. The term refers to web applications that offer a few additional features on top of their basic web features that were originally reserved for native apps. The most frequently mentioned features are offline capability, push notification support and installability on the home screen. However, there are a lot more features and this list keeps growing. One feature that has been little noticed and used (at least in my perception) is the ability to use the vibration capability of a device.

I stumbled across this interesting feature more or less by accident and was a bit surprised that it is very little used so far, since it offers an additional - in mobile apps already very common - method to provide feedback to the user about an executed action: the haptics. One possible explanation: of course, this only works on devices with the ability to vibrate, i.e. mostly mobile devices. Desktop PCs or notebooks are excluded from this. However, since a large part of traffic now comes from mobile devices, this presents an interesting opportunity to add haptic feedback to the user experience of these users. Especially due to the purely additive nature of this feature, no compromises have to be made: supported devices get the feature, others don't, but don't lose anything compared to before.

The browser vibration API

To use the vibration functionality the Vibration API is used. The function vibrate can be passed either a number (length of the vibration in milliseconds) or an array of numbers (alternating length of the vibration and length of the pause) as parameter.

window.navigator.vibrate(200) // vibrate 200mswindow.navigator.vibrate([200, 500, 200]) // vibrate 200ms, pause 500ms, vibrate 200ms

As you can see it is extremely easy to implement this function. However, when using it, you should always do an availability check first before attempting to use the function.

if ('vibrate' in window.navigator) {  // supported} else {  // not supported}

Currently only Android devices are supported, since Safari and thus also iOS Safari do not yet support the API (looking at you Apple 🧐)

Example usecase: Shopware PWA Plugin

As an example usecase, I have developed a plugin for Shopware PWA that allows to trigger a vibration of the device for certain events in the application. After installing and integrating the plugin, a short vibration pulse is triggered by default for the following actions:

• Adding a product to the cart
• Adding a voucher code

This list of actions is completely configurable and can be extended or changed as desired. The actions are intercepted via the Interceptor Feature, so if you want to use your own actions in addition to the list of already available actions, you should trigger your own event for this (see documentation: Broadcast custom event).

Particularly handy is the possibility to freely determine the type of vibration in addition to the action: you can determine the length of the vibration as desired, as well as determine your own vibration pattern. For example, instead of a short pulse, a triple pulse can be configured so that the device vibrates three times in quick succession.

More details about the plugin, e.g. installation, available options and more are available on Github and NPM.
NPM: https://www.npmjs.com/package/shopware-pwa-vibration
Github: https://github.com/niklaswolf/shopware-pwa-vibration

Conclusion

The Vibration API is extremely easy to use. Due to its additive nature, it does not bring any drawbacks, supported devices get added the option for haptic feedback to the user. This further contributes to the merging of native apps and progressive web apps.
Simple vibrations are possible via the API as well as complex vibration patterns. As with many things, vibration should be used carefully and only in places where it also adds value to the user to avoid overwhelm. Used correctly, however, haptic feedback certainly contributes to an improvement of the user experience.