Vibration API: Browser Support, Patterns, Limitations

What is the Vibration API?

The Vibration API is a JavaScript API that lets a web page trigger a device's vibration motor through navigator.vibrate(). The W3C Devices and Sensors Working Group edits the spec. The method accepts a single duration in milliseconds or an array that alternates vibrate and pause durations.

Which browsers does the Vibration API support?

Chrome, Edge, Opera, Samsung Internet, and Android Browser support navigator.vibrate, while Safari, Safari on iOS, Internet Explorer, and Firefox 129 onward do not, so global browser support sits at about 77% as of May 2026.

How does the Vibration API work?

The Vibration API exposes a single method, navigator.vibrate(pattern), that takes either one duration in milliseconds or an array of alternating vibrate and pause durations. The browser passes the pattern to the operating system, which drives the device's motor through the platform haptics service.

• Single vibration: navigator.vibrate(200) buzzes the motor for 200 milliseconds and returns true if the request was accepted.
• Vibration pattern: navigator.vibrate([200, 100, 200]) vibrates for 200ms, pauses for 100ms, and vibrates for 200ms again.
• Pattern length cap: The W3C spec limits a pattern to 10 entries and caps each entry at 10,000 milliseconds.
• Cancel a vibration: navigator.vibrate(0) or navigator.vibrate([]) stops any active buzz and clears the rest of a pending pattern.
• Sticky user activation: The page must have seen at least one click or tap before the call. Chrome ignores the request and logs a warning otherwise.
• Visible page only: The W3C spec requires the document to be visible, so a hidden tab or background timer cannot trigger the motor.

What are the use cases of the Vibration API?

The Vibration API powers haptic feedback on mobile web apps when shipping a native app would feel like overkill. The patterns the SERP and PWA guides cover are interaction feedback, gaming, accessibility, and notifications.

• Button and form feedback: A 50-millisecond buzz on a tap confirms the action without a toast or modal. Web banking and crypto wallet apps use this on transfer-confirmation buttons.
• Web games: Browser games trigger longer patterns on hits, deaths, or boss attacks. HTML5 platformers and browser MMOs wire vibrate into damage and pickup events.
• Accessibility cues: Users in noisy or quiet rooms get a short buzz when a long-running task finishes, since the audio cue can be missed or muted.
• Form validation errors: A 100-millisecond vibration on a failed input draws attention more reliably than a red border alone for users glancing at the screen.
• Audio sync in PWAs: Music PWAs and metronomes vibrate on each beat to add a physical pulse alongside the audio track.
• Navigation cues: Map web apps buzz on turn instructions when the screen is in a pocket or holster, so the user does not have to keep watching the route.

How do you check if a browser supports the Vibration API?

Feature-detect navigator.vibrate before calling it. The check is one line and works in every browser, including those that never shipped the API and Firefox 129+ where the method was removed.

• Check the navigator object: The expression "vibrate" in navigator returns true on supported browsers and false on Safari, iOS Safari, and Firefox 129+.
• Inspect the return value: A successful navigator.vibrate(50) call returns true. Browsers that reject the request, like background tabs or pages without user activation, return false.
• Watch the console for activation errors: Chrome logs "Blocked call to navigator.vibrate because document does not have user activation" when the call runs before the first click or tap.
• Test on real Android hardware: A desktop Chrome or Edge call returns true but does not move the motor. Only Android phones and tablets prove the call works end to end.

Paste this snippet into the DevTools console of Chrome, Edge, or Samsung Internet on an Android device. Click anywhere on the page once, and the motor buzzes the 200-100-200 pattern.

// Paste this into a browser DevTools console to feature-detect and trigger
// a vibration pattern from the next click anywhere on the page.
if ("vibrate" in navigator) {
  console.log("Vibration API is supported.");

  document.body.addEventListener("click", () => {
    const accepted = navigator.vibrate([200, 100, 200]);
    console.log("Vibration request accepted:", accepted);
  }, { once: true });
} else {
  console.log("Vibration API is not supported in this browser.");
}

If the console prints "Vibration API is not supported in this browser", the runtime is Safari, an iOS browser, or Firefox 129 or later. Fall back to a no-op or a native wrapper for those visitors.

What are the known issues with the Vibration API?

The Vibration API has the rockiest browser footprint of any common device API. Plan for missing iOS support, Firefox removal, silent desktop calls, and the user-gesture rule.

• No Safari, no iOS, no iPadOS: Safari on every Apple platform refuses to ship navigator.vibrate. iPhone and iPad visitors fail the feature test and need a native wrapper for haptics.
• Firefox 129 removed support: Firefox 129 and later return undefined when a page reads navigator.vibrate. Mozilla pulled the API after concluding the desktop implementation was a no-op and the Android one had unfixed bugs.
• Desktop calls return true but do nothing: Laptops and desktops lack a vibration motor, so the call succeeds and the user feels nothing. Detect mobile user agents before relying on the buzz as user feedback.
• Sticky user activation rule: Chrome ignores any vibrate call that runs before the first click or tap on the page. setTimeout, page-load handlers, and fetch callbacks all fail silently.
• Background tabs are blocked: The W3C spec says a hidden document cannot vibrate. A timer firing in a background tab gets dropped, even if the page had user activation earlier.
• Pattern length and duration caps: Patterns longer than 10 entries or single durations over 10,000 milliseconds get clipped or rejected by the browser.
• Battery and motor cost: Long or rapid patterns drain the battery and warm the motor. Keep patterns short and respect the user's silent or do-not-disturb mode.
• Silent mode and DND vary by OEM: Many Android OEMs suppress vibration when the system is in silent or do-not-disturb mode, so the same code can produce different results on a Pixel, a Galaxy, and a OnePlus.

In my experience, the most surprising failure is Firefox 129. Pages that worked fine on Firefox 128 fall back to a missing-method check on Firefox 129, so a UA-version sniff returns true while the API silently disappears. Use a hard "vibrate" in navigator feature test on every render, and never assume Firefox still has the method just because earlier versions did.

Citations

All Vibration API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Vibration API: developer.mozilla.org/en-US/docs/Web/API/Vibration_API
• MDN Web Docs - Navigator: vibrate() method: developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
• W3C - Vibration API specification: w3.org/TR/vibration
• W3C - Vibration API editor's draft: w3c.github.io/vibration
• Firefox 129 release notes for developers: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/129
• Bugzilla - Disable broken vibration APIs (1900037): bugzilla.mozilla.org/show_bug.cgi?id=1900037
• Bugzilla - Decide what to do with navigator.vibrate (1653318): bugzilla.mozilla.org/show_bug.cgi?id=1653318
• Chrome for Developers - User activation: developer.chrome.com/blog/user-activation
• Chrome Platform Status - Remove navigator.vibrate without user gesture: chromestatus.com/feature/5644273861001216
• WICG/interventions - Require user activation for navigator.vibrate: github.com/WICG/interventions/issues/47
• w3c/vibration - Require sticky activation pull request: github.com/w3c/vibration/pull/30
• Google Chrome samples - Vibration API: googlechrome.github.io/samples/vibration