Create local push notification in ionic 3 : 10 minutes
local
notification
ionic3
- By Code solution
- Jan 20th, 2021
- 0 comments
- 0
Create local push notification in ionic version 3. they look like native local push notification.
Create a project run this command:
ionic start <project name> blank
then move into the newly created directory:
cd <project name>
Open app.module.ts in src/app/app.module.ts and add code
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { LocalNotifications } from '@ionic-native/local-notifications';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Open home.html in pages/Home/home.html and add code
<ion-header>
<ion-navbar color="primary">
<ion-title>
Notifications
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button block (click)="singlenotification()">One notification</button>
<button ion-button block (click)="singlenotification()" color="secondary">Multiple notification</button>
<button ion-button block (click)="delayednotification()" color="danger">delayed notification</button>
</ion-content>
Open home.ts in pages/Home/home.ts and add code
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LocalNotifications } from '@ionic-native/local-notifications';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public localNotifications: LocalNotifications) {
}
singlenotification(){
this.localNotifications.schedule({
id: 1,
text: 'Single ILocalNotification',
icon: 'http://codesolution.co.in/assets/images/code/codeicon.png'
});
}
multiplenotification(){
this.localNotifications.schedule([{
id: 1,
text: 'Multi ILocalNotification 1',
icon: 'http://codesolution.co.in/assets/images/code/codeicon.png'
},{
id: 2,
title: 'Local ILocalNotification Example',
text: 'Multi ILocalNotification 2',
icon: 'http://codesolution.co.in/assets/images/code/codeicon.png'
}]);
}
delayednotification(){
this.localNotifications.schedule({
text: 'Delayed ILocalNotification',
trigger: {at: new Date(new Date().getTime() + 3600)},
led: 'FF0000',
sound: null,
icon: 'http://codesolution.co.in/assets/images/code/codeicon.png'
});
}
}
local push notification like android application code is done you add platform in your application code platform add command:
ionic cordova platform add android/ios/windows
Build and Run command
ionic cordova build android/ios/windows ionic cordova run android/ios/windows
Github link: https://github.com/Sudarshan101/localnotification
See demo: https://www.youtube.com/watch?v=wCS9voznZq8
Thank you