iOS web haptics

jonas -

I have always disliked that there wasn't a way to use haptic feedback inside of iOS Safari.

I would sometimes look at the caniuse page for Navigator.vibrate, only to sadly realize Apple would never allow such a thing to exist on their platform.

However, in Safari 17.4, they introduced the HTML switch control, which they later gave haptic feedback.

Another case of Apple gatekeeping features for their own use, but couldn't you somehow "abuse" this to programmatically trigger haptics?

I tried messing around with this to somehow make it work, but ultimately failed to do so.

Until I later had to use cobalt.tools for downloading a video, and to my surprise, their buttons had haptics.

Of course, I instantly went to their source code to see how they implemented it, and it was pretty trivial. I'm kinda mad at myself how I didn't figure this out earlier.

The implementation: github.com/imputnet/cobalt/blob/main/web/src/lib/haptics.ts

TLDR: They just create an <input type="checkbox" switch /> element, wrap it in a label, and click it, then it gets removed from the DOM. Easy stuff, really.

It doesn't work when you try to .click() on the input element itself, which is what I was trying.

I don't know if Apple will ever implement something to prevent this behavior, but until they do, I have created a library so you can use this wherever.

It's framework agnostic; just call haptic(), haptic.error(), or haptic.confirm() on any event, and it works.

The library: npm.im/ios-haptics

It's pretty basic. Feel free to send a PR or make an issue if you find something to improve.