How to Add Vibration in Ionic 5/Angular Application with Ionic Native & Cordova Plugin

Last updated on by Digamber

In this Ionic 5/Angular tutorial, you will learn how to add vibration in the Ionic 5 application step by step using Ionic Native and Cordova packages.

Vibrating a device heralds the coming messages, notifications, or even an important call. All the modern devices come with this feature; likewise, it should be enabled programmatically.

The vibration in Ionic is possible with Cordova and Ionic Native plugins; it works smoothly in Android, iOS, and Windows by accessing vibration plugins in various methods.

Let’s start implementing the vibration feature in the Ionic application.

Setting up Ionic Environment

Ionic development starts with installing the Ionic command-line-interface tool (CLI), its a foundational tool for Ionic app development. Run the below command to install it globally.

npm install -g @ionic/cli

The below command helps you confirm the ionic version:

ionic --version

Create a new Ionic 5/Angular blank project:

ionic start ionic-vibration-example blank --type=angular

Head over to project root:

ionic-vibration-example

Install & Configure Ionic Native and Cordova Vibration Package

Once the Ionic project has been installed, right after that, execute both the commands simultaneously through the console to install the Ionic native and Cordova vibration plugin.

ionic cordova plugin add cordova-plugin-vibration
npm install @ionic-native/vibration

Theoretically, you have to import the Vibration package from ‘@ionic-native/vibration/ngx’ in the main app.module.ts file, also inject the Vibration service in providers array to integrate the service in Ionic.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { Vibration } from '@ionic-native/vibration/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Vibration
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Implement Vibration in Ionic 5

All the time taking work has been done, now start integrating the Vibration in the Ionic project.

Move to home.page.ts file, in here; you have to invoke the adding vibration process by importing the Vibration service at the top. Also, inject the Vibration in the constructor() method.

It will allow you to access vibrate methods in the Ionic application.

import { Component } from '@angular/core';
import { Vibration } from '@ionic-native/vibration/ngx';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor( private vibration: Vibration ) {}

  invokeVibration(durationInMs) {
    this.vibration.vibrate(durationInMs);
  }

  vibratePattern(pattern) {
    this.vibration.vibrate(pattern);
  }

  reovkeVibration () {
    this.vibration.vibrate(0);
  }  

}

The invokeVibration() method takes one parameter in milliseconds for evoking the vibration; it is all done with the vibrate method.

The vibratePattern() method allows the device to vibrate for a specified pattern. Well, It is a type of sequence of durations (in milliseconds) for which to turn on or off the vibrator. However, it works for Android and Windows device only.

The revokeVibration() method stops the Vibration; however, it supports Android and Windows device only.

Call Vibration Events

Open the home.page.html file and set up the Vibration events in the Home component.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Vibration Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <h4>Vibrate Once</h4>
  <ion-button expand="full" (click)="invokeVibration()">Vibrate for 3 seconds</ion-button>

  <h4>Vibrate with pattern</h4>
  <ion-button expand="full" (click)="vibratePattern([1000, 1000, 3000, 1000, 5000])">Vibration Pattern</ion-button>

  <h4>Revoke Existing Vibration</h4>
  <ion-button expand="full" (click)="reovkeVibration()">Revoke vibration</ion-button>
</ion-content>

Test Ionic Vibration App

For testing the Ionic vibration app, first, we need to add the platform using either of the below command based on our device choice.

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Next, run the below build command:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

The following command can help you test the app on a real device; also, you can debug the app in the Chrome browser. So, connect your device to the computer through USB and execute the command.

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Summary

So this was it; we have completed the Ionic 5 Vibration tutorial; in this tutorial, we saw how to add a vibration feature in the Ionic application. We also looked at various methods for handling the vibration using Ionic native and Cordova packages.

That’s all folks! Thanks for reading and don’t forget to share this tutorial with others.