Add Vibration in Ionic 7 Angular with Ionic Native & Cordova

In this Ionic Angular tutorial, you will learn how to add vibration in the Ionic 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).

It’s a foundational tool for Ionic app development. Run the below command to install it globally.

sudo npm install -g @ionic/cli

The below command helps you confirm the ionic version:

ionic --version

Create a new Angular Ionic blank project:

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

Head over to project root:

ionic-vibration-example

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

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.

npm i cordova-plugin-vibration --legacy-peer-deps

npm install @ionic-native/vibration --legacy-peer-deps

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.

Implement Vibration in Ionic

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: any) {
    this.vibration.vibrate(durationInMs);
  }
  vibratePattern(pattern: any) {
    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 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.