Navigator vibrate break the code on ios browsers

Apple's mobile web browser simply does not have support for it.

Firefox and Chrome for iOS are wrappers around Safari's rendering engine.

We don't want our app to break down and be unusable on iOS devices. But we really want to use navigator.vibrate() on Android or wherever possible. One thing you can do is you can create your own policy over browser policies. Ask "Can we make iOS devices ignore navigator.vibrate()"? The answer is "Well, yes you can do that by using a user agent parser." (Such as Faisal Salman's UAParser to detect if the user's device was an iOS or Mac OS device.) In your code, wrap all the navigator.vibrate() calls inside conditions like,

if(nameOfUsersOS != "iOS" && nameOfUsersOS != "Mac OS") { navigator.vibrate(); }

Note: You must replace nameOfUsersOS with your own variable name.

Note: This is only one possible approach. Policy makers of Apple can and sometimes do change their minds. That means in the future they could allow the good Vibration API just like they allowed the Web Speech API recently. You must use the solution in kotavy's answer unless your policy is like "no vibration for Apple users forever".

Quentin is correct that Apple devices do not support the API.

The given code fails to check for vibration support when actually calling the method. To avoid the vibrate function being caught undefined:

const canVibrate = window.navigator.vibrate
if (canVibrate) window.navigator.vibrate(100)