title: How to bypass "Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet"?
body: <p>I have a use case where I need to use the <code>navigator.vibrate</code> API to vibrate once an image has finished sliding in from the side:</p>
  
  <p>Code pen demo here: <a href="https://codepen.io/ifusion/pen/XeWqpj" rel="nofollow noreferrer">https://codepen.io/ifusion/pen/XeWqpj</a></p>
  
  <p><strong>Note, this only seems to work on Android Google Chrome &amp; Android Firefox</strong></p>
  
  <p>However if the <code>navigator.vibrate</code> is not activated by an actual touch then in chrome throws an error in the console: </p>
  
  <p><code>[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.</code></p>
  
  <p>Samsung are using it at the end of the second step on this site: <a href="https://explorethenextgalaxy.com/" rel="nofollow noreferrer">https://explorethenextgalaxy.com/</a> (Only works on android chrome &amp; android firefox).</p>
  
  <p>Screenshot at the point of it happening: <a href="https://www.dropbox.com/s/e8h7s3nzfwdk9dk/Screenshot%202017-09-13%2016.50.24.png?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/e8h7s3nzfwdk9dk/Screenshot%202017-09-13%2016.50.24.png?dl=0</a></p>
  
  <p>I have had a look through their code and they are just using the <code>navigator.vibrate</code> just like I am and can't see them doing anything differently.</p>
  
  <p>Is there a way to by pass this? I have tried <code>.click()</code> etc but the error still shows.</p>