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.

#ionic #angular #mobile-apps #programming #developer