Implementing the Vibration API in your PWA

Demo

Install the app on a smartphone. Choose a pattern and tap the below button to make the device vibrate.

Use cases

• User Feedback: Providing haptic feedback to users when interacting with buttons, forms, or other elements in your PWA, enhancing the user experience.
• Gaming: Adding tactile sensations to web-based games, enhancing immersion and responsiveness during gameplay.
• Touch Guidance: Assisting users with impairments by using vibrations to guide them through certain interactions, like form validation or navigation.
• Interactive Experiences: Creating interactive and dynamic web experiences, such as simulating the sensation of scrolling through a virtual list or slider.
• Orientation and Navigation: Incorporating vibrations into web-based maps or navigation systems to provide tactile cues when changing directions or reaching waypoints.
• Feedback for Actions: Providing vibrations in response to specific user actions, such as successful submission of a form or completion of a task.
• Custom Effects: Designing unique vibration patterns for branding purposes or creative effects, offering a distinctive touch to a PWA.
• Accessibility: Improving accessibility by using vibrations to convey information to users with visual impairments or to enhance the overall usability of a PWA.
• Audio Visualization: Syncing vibrations with audio or music playback to create a multisensory experience that complements the auditory elements.

Browser support

The Vibration API is supported by most modern web browsers on touch-enabled devices, with the exception of Safari. A fallback for iOS is provided below.

API

Code

Links & Documentation

• Vibration API Documentation