Add a Mobile-Only Touch to Your Web App with the Vibration API

Make your mobile web app feel more alive with subtle haptic feedback all through JavaScript.

Introduction

When you tap a button in a native app, you often feel a small, crisp vibration confirming that your action went through.
That’s called haptic feedback, and it’s one of the simplest ways to make user interactions feel satisfying and responsive.

But here’s the cool part: you can add the same experience to mobile web apps with just one JavaScript function.

It’s called the Vibration API, and while it’s tiny, it can make your web UI feel more native and engaging on supported devices.

Let’s see how to use it and where it shines.

1. What Is the Vibration API?

The Vibration API is a built-in browser feature that lets your web app trigger short vibrations on supported devices (mostly Android).

It lives under the navigator object and uses one simple method:

navigator.vibrate(durationOrPattern);

Where:

durationOrPattern can be a single number (milliseconds of vibration), or
an array defining a vibration pattern (vibrate, pause, vibrate…).

It’s supported on most Android browsers but not iOS.
That’s why this API is great for adding a mobile-only touch, rather than a core app dependency.

2. Simple Example: A Button That Feels Real

Here’s the easiest possible demo:

<button id="tap">Tap Me</button>

<script>
  document.getElementById('tap').addEventListener('click', () => {
    navigator.vibrate(100); // vibrate for 100ms
    alert('Button tapped!');
  });
</script>

Try it on an Android phone in Chrome, and your tap will feel real.
It’s subtle, instant, and takes one line of code.

3. Adding Personality with Patterns

You can define vibration sequences to represent different actions.

navigator.vibrate([100, 50, 200]);

This means:

Vibrate for 100ms
Pause for 50ms
Vibrate again for 200ms

Now your app can “speak” through vibration patterns.

Example: Success vs. Error Feedback

<button id="success">✅ Success</button>
<button id="error">❌ Error</button>

<script>
  document.getElementById('success').addEventListener('click', () => {
    navigator.vibrate(150); // short buzz
  });

  document.getElementById('error').addEventListener('click', () => {
    navigator.vibrate([100, 50, 100, 50, 100]); // triple buzz
  });
</script>

Now success feels smooth, while error feedback feels noticeable just like on native apps.

4. Use Cases That Feel Native

Haptic feedback works best when it supports real interactions:

These short tactile cues make your app’s feedback loop tighter. Users don’t just see success, they feel it.

5. Stopping Vibrations

You can cancel any active vibration instantly with:

navigator.vibrate(0);

This is handy for cancel buttons, modal closures, or interrupting longer patterns.

6. Browser Support

The Vibration API is designed for mobile-first web apps.
Here’s where it works today:

So, you can use it as a progressive enhancement; it gracefully fails silently on unsupported devices.

7. Real Example: Add Haptic Feedback to a To-Do App

Here’s a small practical demo:

<ul id="tasks">
  <li>✅ Buy groceries</li>
  <li>✅ Reply to emails</li>
</ul>

<script>
  document.querySelectorAll('#tasks li').forEach(task => {
    task.addEventListener('click', () => {
      task.classList.toggle('done');
      navigator.vibrate(100);
    });
  });
</script>

<style>
  .done {
    text-decoration: line-through;
    opacity: 0.5;
  }
</style>

Now, every completed task gives you that small, satisfying “buzz” just like checking something off in a native app.

8. Pairing Vibration with Notifications

You can even combine vibration with the Notifications API for richer, more physical alerts:

new Notification('New message received!');
navigator.vibrate([200, 100, 200]);

Or, for push notifications in a PWA:

self.registration.showNotification('You have a new alert!', {
  body: 'Tap to open',
  vibrate: [200, 100, 200, 100, 300],
});

It’s a simple way to make notifications feel like notifications.

9. Best Practices for Haptic Feedback

A few quick tips for good UX:

Keep it short, under 300ms feels more natural.
Don’t overdo it; save vibrations for key interactions.
Always pair with visuals; vibration alone can be confusing.
Offer an option to disable respect for accessibility preferences.
Use it as progressive enhancement, not a requirement.

A good rule of thumb: haptics should amplify your UX, not dominate it.

10. Full Demo: Vibration Playground

<h3>Try Vibration Feedback</h3>
<button onclick="navigator.vibrate(100)">Short Buzz</button>
<button onclick="navigator.vibrate([200, 100, 200])">Pattern Buzz</button>
<button onclick="navigator.vibrate(0)">Stop</button>

Try it on your Android phone, you’ll instantly feel the difference between short and patterned feedback.

Conclusion

The Vibration API is one of those hidden gems in web development, simple, underused, and surprisingly powerful.

In a mobile world where touch matters more than ever, adding haptic feedback can make your web app feel smoother, faster, and more native without writing a single line of native code.

Pro Tip: Combine navigator.vibrate() with animations or sound effects to create a cohesive, multi-sensory user experience.

Call to Action

Would you use haptic feedback in your next mobile web app?
Share your thoughts or use cases in the comments, and bookmark this post to add that extra feel to your future projects.

Skill Stuff