Ionic 5 Adding Vibration Ionic Example Application using Cordova & Native Plugins

Hey there, in this Ionic 5/4 tutorial, we are going to implement a native vibration feature in an Ionic application using the Cordova plugin and its Native wrapper for Angular.

To use the Vibration feature, the application needs to access the hardware components of the real device. In high-level programming languages like Java, Dart, etc used to develop native applications we can do this easily. Thanks to Cordova and Ionic’s Native plugin which enables us to implement native Vibration feature in a hybrid application just by calling some Javascript methods.  

Why add the Vibration effect in Applications?

Well, the device vibration-based interactions in an application add much value to user experience. We can add vibration effects when a user clicks or taps a critical control or sometimes in gaming scenarios. If you may have noticed in the Amazon shopping app, the device gives a cool vibration sense when a new item is added to the cart. Top of all we are going to do the same in an Ionic application. Let’s do it…  

 

 

Install or Update Ionic CLI

To create Ionic applications, you need to install @ionic/cli package. If already have updated it to the latest version

$ npm install -g @ionic/cli

 

Create new Ionic Angular Application

We’ll create a new Ionic 5 application using Angular framework with a starter blank template.

$ ionic start ionic-vibration-plugin-app blank --type=angular

The --type option property is used to select the framework we want to use for our Ionic application   Move to the application directory

 

$ cd ionic-vibration-plugin-app

  Now you can run the Ionic application by hitting

 

$ ionic serve --lab

The--lab option is used to open the application in the browser into a lab viewer where you can concurrently see how it will look on multiple platforms including Android, iOS, and Windows.  

 

Install Cordova & Native Plugins for Vibration

After creating our Ionic 5 Angular application, we’ll install the Cordova and Ionic Native plugins by executing below npm commands

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

 

Import Plugin in App Module

Before using the Vibration plugin functions inside out application, we need to import these plugin modules inside the main module. In our Ionic application, there is one main module right now the AppModule.

Open the app.module.ts file, import the Vibration class  then add in the providers array

// app.module.ts
...

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

@NgModule({
...
  providers: [
    StatusBar,
    SplashScreen,
    Vibration,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Using Vibration in Ionic Application

Now, we will look into how to actually use the Vibration function inside our application components.  

First, we’ll need to import the Vibration class from plugin then add in the class component’s contractor function to provide its methods for that class.

// home.page.ts
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
  ) {
  }

}

The Vibration class provides the vibrate() method which takes a single Array of time values.

 

How to use vibrate() method ?

The vibrate() method can be used in the following ways:

 

Vibrate for one time

We can call the vibrate method by passing the time in milliseconds to vibrate continuously for a given time in ms.

doVibrationFor(ms) {
    // Vibrate the device for given milliseconds
    // Duration is ignored on iOS and limited to 1 second.
    this.vibration.vibrate(ms);
  }<br />

 

Vibrate with a provided pattern

To vibrate with a pattern effect we can pass multiple values in an array of milliseconds

vibrateWithPattern(pattern) {
    // Patterns work on Android and Windows only
    this.vibration.vibrate(pattern);
  }

 

Stop Currently Running Vibration

To stop an active vibration pattern, we can pass a 0 to vibrate() method.

stopVibration() {
    // Stop any current vibrations immediately
    // Works on Android and Windows only
    this.vibration.vibrate(0);
  }

 

Update UI for Home Template

Here we are adding three buttons to call above mentioned methods. Place the following template inside the home.page.html file.

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

<ion-content [fullscreen]="true">
  <h4>Vibrate for one time</h4>
  <ion-button expand="full" fill="outline" (click)="doVibrationFor()">3 seconds vibration</ion-button>

  <h4>Vibrate with a provided pattern</h4>
  <ion-button expand="full" fill="outline" (click)="vibrateWithPattern([500,1000,500,300,200,100])">Pattern vibration
  </ion-button>

  <h4>Stop Currently Running Vibration</h4>
  <ion-button expand="full" fill="outline" (click)="stopVibration()">Stop vibration</ion-button>
</ion-content>

 

Next, update the home.page.ts file

// home.page.ts
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
  ) { }

  doVibrationFor(ms) {
    // Vibrate the device for given milliseconds
    // Duration is ignored on iOS and limited to 1 second.
    this.vibration.vibrate(ms);
  }

  vibrateWithPattern(pattern) {
    // Patterns work on Android and Windows only
    this.vibration.vibrate(pattern);
  }

  stopVibration() {
    // Stop any current vibrations immediately
    // Works on Android and Windows only
    this.vibration.vibrate(0);
  }


}

 

Run Application in Real Device

To check vibration functionality, you need to run the application in a real device. For that, you need to add the Platform for which you are going to build the application.

Add Platform in Application

Run the following command in the terminal to install the required platform

# Add Android
$ ionic cordova platform add android

# Add iOS
$ ionic cordova platform add ios

# Add Windows
$ ionic cordova platform add windows

 

Build Runnable File

After adding the platform, you can run the following commands to create an executable file like APK file for Android. Or you can simply run the app in the USB connected mobile with USB Debugging enabled discussed in the next step.

# Build Android
$ ionic cordova build android

# Build iOS
$ ionic cordova build ios

# Build Windows
$ ionic cordova build windows

 

Live Run Application in USB connected Device

If you just want to run the application in the real device and debug it on the Chrome browser, just execute the following command after connecting your mobile to your computer

# Live Run on Android
$ ionic cordova run android -l

# Live Run on iOS
$ ionic cordova run ios -l

# Live Run on Windows
$ ionic cordova run windows -l

 

Conclusion

That’s it in this tutorial we discussed how to implement Vibration functionality in a different way using Cordova and Native plugin in an Ionic application. We also discussed how to add platform and test application in a real device to check native features.

If you enjoyed the content. Do share with other geeks. Thanks for reading!