Skip to main content

Ionic Vibrate On Tap

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, we will take a look at how to implement Vibration on Tap. This is useful to give user feedback of some kind.  One example of such implementation that comes to mind is that if the user has not filled out a form and presses the submit/send button, then we can let the user know by a short vibration along with other visual indicators.

In this tutorial, we will vibrate the device for a short time when the user taps a button.

Step 1)

Let’s start off by creating a new app. We do that using the following command.

 

Step 2)

Now it’s time to add the plugin and the Ionic Native wrapper.We do that as follows.

Step 3)

We now need to add the plugin to the app’s module. So open up src\app\app.module.ts and add the plugin to the providers array as follows.

 

Step 4)

As mentioned in this example I will create a button and we will vibrate device when the button is tapped. So to create the button, open up src\pages\home\home.html and code it as follows.

Here we have a function vibrate() that will be executed every time the button is clicked.

 

Step 5)

Now it’s time to implement the vibration functionality. Open up src\pages\home\home.ts and code it as follows.

Here we are importing the vibration and then injecting it into the constructor. Inside the vibrate() function we are doing this.vibration.vibrate(50) this will make the phone vibrate for 50 milliseconds. I found that 50 milliseconds is a perfect short burst of vibration to grab the users attention.

 

Step 6)

We will need to run our app on a conncected device to feel the vibrations. Running in on an emulator will work but we won’t be able to feel the vibrations. We can run our app after connecting our device and executing the following command.

 

Conclusion

Giving users physical feedback in the form of vibrations is a great way to grab the users attention. But be careful that you do this with caution and on important sections of the app only. Overdoing it can cause the user to feel frustrated and abandon your app.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: