CodeSolution

Please wait...

Create local push notification in ionic 3 : 10 minutes

@local  @ push  @ notification  @ ionic3  

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

Comments 0

Reply