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:

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: .

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

Screenshot at the point of it happening: .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.

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.

• javascript
• jquery
• google-chrome

5 Answers 5

The vibrate API is only available once the user has started interacting with your page (e.g, by tapping or dragging on the screen). It cannot be used before a user interaction -- this is to prevent web pages (particularly embedded advertisements!) from attempting to scare the user by making their phone vibrate.

There is no way to bypass this, short of restructuring your page such that the user has to tap something before seeing that content.

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.

if(window.navigator.userAgentData.mobile){
    window.navigator.vibrate(100);
}

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);

I just faced this problem and found easy solution:

window.navigator.vibrate && window.navigator.vibrate(100);

using on event handler.

No more error console message.