How to bypass "Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet"?

user_3871401 0
Viewed 6747

I have a use case where I need to use the navigator.vibrate API to vibrate once an image has finished sliding in from the side:

Code pen demo here: https://codepen.io/ifusion/pen/XeWqpj

Note, this only seems to work on Android Google Chrome & Android Firefox

However if the navigator.vibrate is not activated by an actual touch then in chrome throws an error in the console:

[Intervention] Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet: https://www.chromestatus.com/feature/5644273861001216.

Samsung are using it at the end of the second step on this site: https://explorethenextgalaxy.com/ (Only works on android chrome & android firefox).

Screenshot at the point of it happening: https://www.dropbox.com/s/e8h7s3nzfwdk9dk/Screenshot%202017-09-13%2016.50.24.png?dl=0

I have had a look through their code and they are just using the navigator.vibrate just like I am and can't see them doing anything differently.

Is there a way to by pass this? I have tried .click() etc but the error still shows.

google-chrome jquery javascript
5 Answers

Another way to this easily.

Disable this option on your chrome browser by going to 

chrome://flags

and find option called :: Requiring user gesture for the Vibration API and change the value to Disable.

this will require reload your browser and now every thing work find.

user_78072870

Just check if it's mobile

const isMobile: () => {
    const nav = navigator.userAgent.toLowerCase();
    return (
        nav.match(/iphone/i) || nav.match(/ipod/i) || nav.match(/ipad/i) || nav.match(/android/i)
    );
};

isMobile() && window.navigator.vibrate(100);
user_26322430 
if(window.navigator.userAgentData.mobile){
    window.navigator.vibrate(100);
}
user_15886390
Related