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