Web Haptics Brings Native App Feedback to Websites

Remember when every website wanted to be an app? That was 2010. Then we got PWAs, which were supposed to bridge the gap. That was 2015. Now in 2024, we're still trying to make websites feel more native, except this time someone's figured out how to add that little buzz you get when you tap a button on your phone.

Web Haptics is an NPM package that's been trending on Twitter—which means it'll either be integrated into 10,000 sites by next month or forgotten by Tuesday. But the technical execution here is interesting enough to examine regardless of where the hype cycle lands.

The Problem That Shouldn't Exist

There's already a standard web API for this: [navigator.vibrate()](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate). It works great on Android. It has exactly zero support on iOS. This is the kind of thing that makes you wonder whether Apple's legendary attention to detail extends to their WebKit team.

The Better Stack tutorial walks through the package's implementation, and what makes this worth examining isn't the API itself—it's literally one function—but how they worked around Apple's missing functionality.

"The trouble is though this works great on Android, but iOS has absolutely zero support for it," the video explains. "Luckily though, there is another way to get haptic feedback on iOS and that is to use an input that has the type of switch."

And there's your hack. iOS does provide haptic feedback for certain UI elements. Toggle switches buzz when you flip them. So Web Haptics creates an invisible switch and rapidly toggles it to simulate vibration patterns. It's the kind of workaround that makes you respect the cleverness while questioning whether this much effort should be necessary.

The Implementation is Genuinely Simple

To their credit, the package authors kept the developer-facing API clean. Using the React hook version:

const { trigger, cancel, isSupported } = useWebHaptics();

That's it. You get a trigger function, a way to cancel ongoing haptics, and a boolean to check browser support. The video demonstrates how you can use preset patterns (success, error, heavy) or define custom vibrations with arrays specifying delay, duration, and intensity.

There's even a debug mode that plays audio to simulate the haptic pattern during development, since your laptop isn't going to vibrate no matter how much you want it to. Small touch, but shows they've thought about the developer experience.

The package supports React, Vue, Svelte, and vanilla JavaScript. Framework helpers are appreciated, but the core is framework-agnostic—which is how it should be for something this foundational.

The iOS Workaround Deserves Scrutiny

Here's where it gets interesting from a sustainability perspective. Web Haptics works by exploiting an implementation detail—that iOS provides haptic feedback for switch inputs. This isn't a documented API for vibration; it's a side effect.

The video shows the actual checkbox toggling on and off when you trigger haptics: "What this library does to take advantage of that is when we trigger our haptic feedback, it essentially clicks an invisible switch for us that mimics our vibration pattern."

Apple could patch this at any time. They probably won't—it's not a security issue, and breaking it would affect real sites. But they could. And if they do, the maintainers hope Apple would add proper navigator.vibrate() support as a replacement.

That's a lot of hoping. Apple has left WebKit APIs incomplete for years when it suited their native app strategy. There's no obvious incentive for them to change course now.

What This Actually Adds to the Web

Let's be clear about the use case. Haptic feedback makes sense for certain interactions: confirming a purchase, indicating an error, acknowledging a swipe gesture. It's tactile confirmation that something happened.

What it doesn't add is essential functionality. Your website works fine without buzzing someone's phone. This is polish, not foundation. Which is fine—polish matters—but it means the value proposition depends entirely on your site's context.

If you're building something that mimics a native app experience and haptics would genuinely improve the interaction? Sure, this package makes that easy. If you're building a content site or a SaaS dashboard, the ROI on implementing this is unclear.

The tutorial mentions that Poly Market has already implemented it. That's a prediction market platform where tactile confirmation of bets probably does matter. Context appropriate.

The Pattern Recognition Problem

I've watched developers discover clever hacks and build useful abstractions on top of them for 25 years. Sometimes they become standard practice. Sometimes the platform vendor patches the hole. Sometimes the hack just ages poorly as browsers evolve.

Web Haptics reminds me of the early days of CSS-in-JS libraries—technically impressive solutions to real problems, built on shaky foundations. Some of those libraries are now industry standard. Others are maintenance nightmares. The difference usually comes down to whether the platform eventually provides official support.

The video ends with: "I hope Apple don't find a way to patch this or at least if they do patch it, they add support for the vibrate function."

Yeah, me too. But I've been covering Apple and web standards long enough to know hope isn't a strategy.

Worth Using?

The package is well-designed. The API is clean. The invisible switch hack is clever engineering. If you need haptics on the web and you've thought through why you need them, this is probably your best current option.

Just go in understanding you're building on top of a workaround. Document your implementation. Make it easy to remove. And maybe don't build critical flows that depend on vibration feedback, because one iOS update could take it all away.

That's not cynicism. That's pattern recognition.

—Mike Sullivan