https://github.com/samdenty/ios-vibrator-pro-max
Bringing the vibrate API for the first time to the web on iOS 18 Safari
https://github.com/samdenty/ios-vibrator-pro-max
ios safari vibration
Last synced: 3 months ago
JSON representation
Bringing the vibrate API for the first time to the web on iOS 18 Safari
- Host: GitHub
- URL: https://github.com/samdenty/ios-vibrator-pro-max
- Owner: samdenty
- Created: 2025-02-22T00:52:45.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-02T21:14:03.000Z (7 months ago)
- Last Synced: 2025-07-21T01:48:10.242Z (3 months ago)
- Topics: ios, safari, vibration
- Language: TypeScript
- Homepage: https://vibrator.dev/ios-18
- Size: 73.2 KB
- Stars: 174
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `ios-vibrator-pro-max`
[](https://www.npmjs.com/package/ios-vibrator-pro-max)
[](https://www.npmjs.com/package/ios-vibrator-pro-max)
[](https://ios-vibrate-api-demo.vercel.app/)
Finally Safari added an unofficial™️ vibration API. I'm sorry to whoever who let this amazing feature/bug accidentally ship it's way into iOS 18. Tim cook please don't remove it, the web & PWAs need love too.
```ts
import "ios-vibrator-pro-max";
navigator.vibrate(1000);
```
## ⚠️ Limitations
This polyfill will work without any user interaction on iOS `18` to `18.3`. In iOS `18.4` Apple [made the vibration require user interaction](https://x.com/samddenty/status/1897123571799118091). Unfortunately the way they did this, the only interaction that counts is a click (unfortunately dragging doesn't count) and the grant expires after 1s. There's no way to keep vibrating after that click grant expires, except to block the main thread - see below to enable that option
## Durations longer than 1000ms
This will block the main thread for the duration of the vibration pattern. Only vibration patterns longer than 1s total will block. Blocking is required as it's the only way to extend the trusted event grant of the click handler (async vibrations have expiration)
```ts
import { enableMainThreadBlocking } from "ios-vibrator-pro-max";
enableMainThreadBlocking(true);
navigator.vibrate(2000);
```